Jetpack Compose se basa en el paradigma de UI declarativa. En este paradigma, la UI es inmutable y por lo tanto no se puede hacer algo como cambiar una imagen. En cambio, cada modificación en el estado de tu app produce una nueva UI. Es decir, que lo que debes modificar no es la imagen sino el estado.
Para ello lo primero que necesitas es crear un estado que en tu caso podría llamarse isPlaying
var isPlaying by remember { mutableStateOf(false) }
Esto crea un estado mutable con el valor inicial false
(asumo que inicialmente la canción no se estará reproduciendo). Además está haciendo uso de delegados para que el estado se actualice automáticamete cuando cambies el valor de la variable. Para más detalles lee la documentación.
El siguiente paso es definir que imagen generar en cada estado
val image = if (isPlaying) R.drawable.pause else R.drawable.play
Finalmente creas la imagen que corresponda con un onClick
que actualice el valor de isPlaying
var isPlaying by remember { mutableStateOf(false) }
val image = if (isPlaying) R.drawable.pause else R.drawable.play
Image(
painter = painterResource(image),
contentDescription = "Play",
modifier = Modifier
.clickable {
if (mp?.isPlaying == true) {
mp.pause()
isPlaying = true
} else {
mp?.play()
isPlaying = false
}
}
.align(Alignment.Center)
.width(50.dp)
.height(50.dp)
)//Image
Al cambiar un estado ocurre lo que compose llama recomposition, entonces todo ese código se vuelve ejecutar generando una nueva imagen en el mismo lugar donde estaba la anterior. Esto produce el mismo resultado que querías aunque es muy diferente conceptualmente. Para una mejor explicación ver este video.