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.

Practice

1. What does animateFloatAsState do in Jetpack Compose?

easy

A. It smoothly animates a float value from its current to a new target value.

B. It instantly changes a float value without animation.

C. It creates a new float variable without animation.

D. It pauses all animations in the app.

Solution

1. Step 1: Understand animateFloatAsState purpose

   This function animates a float value smoothly when the target changes.

2. Step 2: Compare options

   Only "It smoothly animates a float value from its current to a new target value." describes smooth animation of float values, others are incorrect.

3. Final Answer:

   It smoothly animates a float value from its current to a new target value. -> Option A

4. Quick Check:

   animateFloatAsState = smooth float animation [OK]

Hint: animate*AsState always animates value changes smoothly [OK]

Common Mistakes:

• Thinking it changes values instantly
• Confusing it with creating variables
• Assuming it stops animations

2. Which of the following is the correct syntax to animate a color value using animateColorAsState?

easy

A. val color by animateColor(Color.Red)

B. val color = animateColorAsState(color = Color.Red)

C. animateColorAsState val color = Color.Red

D. val color by animateColorAsState(targetValue = Color.Red)

Solution

1. Step 1: Recall correct syntax for animateColorAsState

   The correct syntax uses 'val variable by animateColorAsState(targetValue = ...)' to get animated value.

2. Step 2: Check options

   val color by animateColorAsState(targetValue = Color.Red) matches correct syntax with 'by' and named parameter. Others have syntax errors or missing 'by'.

3. Final Answer:

   val color by animateColorAsState(targetValue = Color.Red) -> Option D

4. Quick Check:

   animateColorAsState syntax = val x by animateColorAsState(targetValue) [OK]

Hint: Use 'val x by animate*AsState(targetValue = ...)' syntax [OK]

Common Mistakes:

• Omitting 'by' keyword
• Not using named parameter 'targetValue'
• Wrong function name or order

3. What will be the output behavior of this code snippet?

var size by remember { mutableStateOf(50f) }
val animatedSize by animateFloatAsState(targetValue = size)

// Later size = 100f

Choose the correct description:

medium

A. The size decreases from 100f to 50f.

B. The size jumps instantly from 50f to 100f without animation.

C. The size smoothly animates from 50f to 100f over time.

D. The animation never starts because size is not a state.

Solution

1. Step 1: Understand animateFloatAsState behavior

   When the targetValue changes, animateFloatAsState animates smoothly from old to new value.

2. Step 2: Analyze code change

   Initially size is 50f, then changed to 100f, so animatedSize animates smoothly from 50f to 100f.

3. Final Answer:

   The size smoothly animates from 50f to 100f over time. -> Option C

4. Quick Check:

   animateFloatAsState animates value changes smoothly [OK]

Hint: animate*AsState animates changes, not instant jumps [OK]

Common Mistakes:

• Assuming instant value change
• Confusing direction of animation
• Ignoring state usage

4. Identify the error in this code snippet using animateDpAsState:

val size = animateDpAsState(targetValue = 100.dp)
Box(modifier = Modifier.size(size))

medium

A. targetValue should be Dp, not Int.

B. Missing 'by' keyword to get the animated value.

C. animateDpAsState cannot animate size values.

D. Box cannot use Modifier.size with animated values.

Solution

1. Step 1: Check animateDpAsState usage

   animateDpAsState returns State<Dp>, so to get Dp value, use 'val size by animateDpAsState(...)'.

2. Step 2: Analyze code

   Code uses 'val size =' without 'by', so size is State<Dp>, not Dp, causing type mismatch in Modifier.size.

3. Final Answer:

   Missing 'by' keyword to get the animated value. -> Option B

4. Quick Check:

   Use 'by' to get value from animate*AsState [OK]

Hint: Remember 'val x by animate*AsState' to get value, not state [OK]

Common Mistakes:

• Forgetting 'by' keyword
• Passing Int instead of Dp
• Assuming animateDpAsState returns Dp directly

5. You want to animate a button's background color from blue to green when clicked. Which code snippet correctly uses animateColorAsState to achieve this?

hard

A. var isClicked by remember { mutableStateOf(false) }
val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue)
Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") }

B. val isClicked by remember { mutableStateOf(false) }
val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue)
Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") }

C. var isClicked by remember { mutableStateOf(false) }
val bgColor = animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue)
Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") }

D. val isClicked = false
val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue)
Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") }

Solution

1. Step 1: Identify mutable state for click

   To toggle color on click, isClicked must be mutable with 'var' and remember.

2. Step 2: Check animateColorAsState usage and Button colors

   var isClicked by remember { mutableStateOf(false) } val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue) Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") } correctly uses 'var isClicked', 'val bgColor by animateColorAsState', and passes bgColor to buttonColors.

3. Step 3: Verify other options

   val isClicked by remember { mutableStateOf(false) } val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue) Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") } uses 'val' for isClicked (immutable), so cannot toggle. var isClicked by remember { mutableStateOf(false) } val bgColor = animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue) Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") } uses bgColor without 'by', so bgColor is State<Color> passed to buttonColors expecting Color, type mismatch. val isClicked = false val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue) Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") } uses immutable isClicked and tries to toggle it, which is invalid.

4. Final Answer:

   var isClicked by remember { mutableStateOf(false) }
   val bgColor by animateColorAsState(targetValue = if (isClicked) Color.Green else Color.Blue)
   Button(onClick = { isClicked = !isClicked }, colors = ButtonDefaults.buttonColors(bgColor)) { Text("Click") } -> Option A

5. Quick Check:

   Mutable state + animateColorAsState + 'by' = correct animation [OK]

Hint: Use 'var' with remember for mutable state toggling [OK]

Common Mistakes:

• Using 'val' instead of 'var' for mutable state
• Forgetting 'by' keyword for animated value
• Not toggling state properly on click