Recomposition concept in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a Compose state variable that triggers recomposition when changed.

Android Kotlin

var count by remember { mutableStateOf([1]) }

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

Afalse

B"count"

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string or null as initial state causes type errors.

The initial value of the state variable count should be 0 to track a number. This triggers recomposition when count changes.

2fill in blank

medium

Complete the code to update the state variable and trigger recomposition on button click.

Android Kotlin

Button(onClick = { count [1] 1 }) { Text("Increment") }

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

A+=

B*=

C-=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication changes the value incorrectly.

Using += increases the count by 1, triggering recomposition to update the UI.

3fill in blank

hard

Fix the error in the code to properly observe state changes and trigger recomposition.

Android Kotlin

val count = mutableStateOf([1])
Text(text = count.value.toString())

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

A"0"

Bfalse

C0

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string "0" causes type mismatch and recomposition issues.

The initial value must be an integer 0, not a string, to match the expected type and allow recomposition.

4fill in blank

hard

Fill both blanks to create a composable function that remembers a state and updates it on button click.

Android Kotlin

var text by remember { mutableStateOf([1]) }
Button(onClick = { text = [2] }) { Text("Change Text") }

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

A"Hello"

B"World"

C"Hello World"

D"Click"

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted words causes syntax errors.

The state text starts as "Hello" and changes to "World" when the button is clicked, causing recomposition.

5fill in blank

hard

Fill all three blanks to create a stateful composable that toggles a boolean and shows text accordingly.

Android Kotlin

var isOn by remember { mutableStateOf([1]) }
Button(onClick = { isOn = ![2] }) {
  Text(if (isOn) [3] else "Off")
}

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

Atrue

BisOn

C"On"

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using true as initial state or wrong variable name in toggle.

The state isOn starts as false. Clicking toggles it by negating isOn. The text shows "On" when true, else "Off".