@huyhunhngc

Advanced animated color schemes in Jetpack Compose

· huyhunhngc

Static Badge

Taking inspiration from: Animate background color

The simplest example when you want to change the background with animated color.

inspiration

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}

Usage

Generate the corresponding color scheme and provide it to the app theme using CompositionLocal.

val colorScheme = LocalDynamicAnimatedTheme.current
val surfaceContainer by animateColor(colorScheme.surfaceContainer)
val primaryContainer by animateColor(colorScheme.primaryContainer)
val secondaryColor by animateColor(colorScheme.secondary)
val primaryColor by animateColor(colorScheme.primary)
val tertiaryColor by animateColor(colorScheme.tertiary)
val tertiaryContainer by animateColor(colorScheme.tertiaryContainer)

Create animateColor composable

@Composable
fun animateColor(targetValue: Color): State<Color> {
    return animateColorAsState(
        targetValue = targetValue,
        label = "dynamic",
        animationSpec = tween(AnimatedThemeDuration)
    )
}

Let’s see the results: