Android Academy · Lesson

AnimatedVisibility and Transitions

Animate showing and hiding content.

Animating Appearance

Showing and hiding content abruptly feels jarring. Compose's AnimatedVisibility animates a composable as it enters and exits the layout.

Wrap your content in it and control visibility with a boolean. When that boolean changes, Compose plays an enter or exit animation instead of an instant pop.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Enter and Exit Transitions

You can choose exactly how content enters and leaves with the enter and exit parameters. Common building blocks include fadeIn/fadeOut, slideIn/slideOut, and expandVertically/shrinkVertically.

Combine them with the + operator to run several at once.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

All lessons in this course

← Back to Android Academy