Animation basics (animate*AsState) in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to animate the alpha value from 0f to 1f using animateFloatAsState.

Android Kotlin

val alpha by animateFloatAsState(targetValue = [1])
Box(modifier = Modifier.alpha(alpha)) {
    Text("Hello Animation")
}

Drag options to blanks, or click blank then click option'

A0f

Bnull

C100f

D1f

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0f as targetValue will keep the alpha transparent.

Using null causes a compilation error.

The targetValue for animateFloatAsState should be 1f to animate alpha from 0f to 1f.

2fill in blank

medium

Complete the code to animate the size of a Box from 100.dp to 200.dp using animateDpAsState.

Android Kotlin

val size by animateDpAsState(targetValue = [1])
Box(modifier = Modifier.size(size).background(Color.Red))

Drag options to blanks, or click blank then click option'

A300.dp

B200.dp

C100.dp

D150.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100.dp will keep the size unchanged.

Using 300.dp will make the Box too large.

The targetValue should be 200.dp to animate the size from 100.dp to 200.dp.

3fill in blank

hard

Fix the error in the code to animate the color from Color.Red to Color.Green using animateColorAsState.

Android Kotlin

val color by animateColorAsState(targetValue = [1])
Box(modifier = Modifier.size(100.dp).background(color))

Drag options to blanks, or click blank then click option'

AColor.Blue

BColor.Yellow

CColor.Green

DColor.Red

Attempts:

3 left

💡 Hint

Common Mistakes

Using Color.Red will not animate the color change.

Using unrelated colors will animate to wrong colors.

The targetValue should be Color.Green to animate from Color.Red to Color.Green.

4fill in blank

hard

Fill both blanks to animate the rotation of a Box from 0f to 360f degrees using animateFloatAsState.

Android Kotlin

val rotation by animateFloatAsState(targetValue = [1])
Box(modifier = Modifier.size(100.dp).graphicsLayer(rotationZ = [2]))

Drag options to blanks, or click blank then click option'

A360f

B180f

Crotation

D0f

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0f as targetValue will not rotate.

Passing a constant instead of the animated value to rotationZ.

The targetValue should be 360f to rotate fully, and the graphicsLayer rotationZ uses the animated rotation value.

5fill in blank

hard

Fill all three blanks to animate the padding of a Box from 0.dp to 16.dp and change its background color from Color.Gray to Color.Blue.

Android Kotlin

val padding by animateDpAsState(targetValue = [1])
val bgColor by animateColorAsState(targetValue = [2])
Box(modifier = Modifier.padding([3]).background(bgColor).size(100.dp))

Drag options to blanks, or click blank then click option'

A16.dp

BColor.Blue

Cpadding

DColor.Gray

Attempts:

3 left

💡 Hint

Common Mistakes

Using Color.Gray as targetValue will not animate color change.

Passing a constant instead of the animated padding value.

The padding animates to 16.dp, the background color animates to Color.Blue, and the padding modifier uses the animated padding value.