Animation basics (animate*AsState) in Android Kotlin - Mini App: Build & Ship

Build: Color Box Animation

A screen with a colored box that changes its color smoothly when you tap a button.

Target UI

┌─────────────────────────────┐
│          Color Box           │
│                             │
│       ┌─────────────┐       │
│       │             │       │
│       │   [ Box ]   │       │
│       │             │       │
│       └─────────────┘       │
│                             │
│   [ Change Color Button ]    │
└─────────────────────────────┘

Display a square box with a background color.

Add a button labeled 'Change Color' below the box.

When the button is tapped, the box's color changes to a new random color with a smooth animation.

Use animateColorAsState to animate the color change.

Ensure the UI is centered vertically and horizontally.

Starter Code

Android Kotlin

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ColorBoxAnimationScreen() {
    // TODO: Add state for current color
    // TODO: Add button click handler to change color
    // TODO: Use animateColorAsState to animate color changes
    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .size(150.dp)
                    .background(Color.Red) // Placeholder color
            )
            Spacer(modifier = Modifier.height(24.dp))
            Button(onClick = { /* TODO: Change color */ }) {
                Text("Change Color")
            }
        }
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlin.random.Random

@Composable
fun ColorBoxAnimationScreen() {
    val colors = listOf(Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan, Color.Magenta)
    var currentColor by remember { mutableStateOf(Color.Red) }

    val animatedColor by animateColorAsState(targetValue = currentColor)

    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .size(150.dp)
                    .background(animatedColor)
            )
            Spacer(modifier = Modifier.height(24.dp))
            Button(onClick = {
                // Pick a new random color different from current
                var newColor: Color
                do {
                    newColor = colors[Random.nextInt(colors.size)]
                } while (newColor == currentColor)
                currentColor = newColor
            }) {
                Text("Change Color")
            }
        }
    }
}

This screen shows a square box whose background color changes smoothly when you tap the button below it.

We keep track of the current color using a mutableStateOf. When the button is clicked, we pick a new random color from a predefined list, making sure it is different from the current color.

The animateColorAsState function takes the current color as its target and returns an animated color value that changes smoothly over time. We use this animated color as the background color of the box.

The UI is centered using a Box with contentAlignment and a Column to stack the box and button vertically.

Final Result

Completed Screen

┌─────────────────────────────┐
│          Color Box           │
│                             │
│       ┌─────────────┐       │
│       │             │       │
│       │   [ Box ]   │       │
│       │ (color anim)│       │
│       └─────────────┘       │
│                             │
│   [ Change Color Button ]    │
└─────────────────────────────┘

When the user taps the 'Change Color' button, the box's color changes smoothly to a new random color.

The color transition is animated, not instant.

The button remains centered below the box.

Stretch Goal

Add a smooth size animation to the box so it grows slightly bigger when the color changes and returns to normal size after.

💡 Hint

Use animateDpAsState to animate the box size and update the target size when the color changes.