Learn Android Development

Learn Jetpack Compose Animated Content

Step by step learn Jetpack Compose Animated Content

Photo by Priscilla Du Preez on Unsplash

Other than Crossfade and AnimatedVisibility, the ability to animate content with different sizes is another common animation provided by Jetpack Compose.

Here, I’ll be sharing both the provided API as below

Modifier’s animateContentSize

The simpler API we can use to Animate the Content is using the modifier’s animateContentSize

A simple example below

@Composable
fun AnimatedContentSize() {
    Column {
        var expanded by remember {
            mutableStateOf(false)
        }

        Image(
            painter = painterResource(
                id = if (expanded)
                    R.drawable.img
                else
                    R.drawable.ic_launcher_background
            ),
            contentDescription = "",
            modifier = Modifier
                .background(Color.Yellow)
                .animateContentSize(tween(1500))
        )

        Button(onClick = { expanded = !expanded }) {
            Text(if (expanded) "Hide" else "Show")
        }
    }
}

In this example, I slow down the animation using tween(1500) i.e. 1.5s…