Button composable in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this Button composable is clicked?

Consider this Kotlin Compose code snippet for a Button. What will be the visible result after clicking the button once?

Android Kotlin

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
  Text(text = "Clicked: $count")
}

A The button label updates to show "Clicked: 1" after the first click.

B The button label stays "Clicked: 0" even after clicking.

C The app crashes due to missing state initialization.

D The button disappears after clicking.

💡 Hint

Remember that mutableStateOf triggers UI recomposition when changed.

The mutableStateOf variable 'count' starts at 0. Each click increments it by 1, causing the Button's Text to update and show the new count.

📝 Syntax

intermediate

Which Button composable code snippet is syntactically correct?

Select the option that compiles without errors in Jetpack Compose.

A Button { onClick = { println("Clicked") } Text("Press") }

B Button(onClick = println("Clicked")) { Text("Press") }

C Button(onClick = { println("Clicked") } Text("Press"))

D Button(onClick = { println("Clicked") }) { Text("Press") }

💡 Hint

The onClick parameter requires a lambda expression.

Option D correctly passes a lambda to onClick and a trailing lambda for the Button content. Other options have syntax errors or misplaced code.

❓ lifecycle

advanced

What is the effect of calling setContent inside an Activity multiple times with Button composables?

If an Android Activity calls setContent twice, each time setting a Button composable, what happens to the UI?

A The app crashes due to multiple setContent calls.

B Both Buttons appear stacked vertically on the screen.

C The second setContent replaces the first UI completely, showing only the second Button.

D The first Button remains visible and the second is ignored.

💡 Hint

setContent replaces the entire Compose UI content of the Activity.

Each call to setContent replaces the whole UI content. So the second call removes the first Button and shows only the second.

❓ navigation

advanced

How to navigate to a new screen on Button click using Jetpack Compose Navigation?

Given a Button inside a composable, which onClick implementation correctly navigates to a "details" screen using NavController?

Android Kotlin

val navController = rememberNavController()
Button(onClick = { /* navigation code here */ }) {
  Text("Go to Details")
}

A onClick = { navController.navigate("details") }

B onClick = { navController.navigateTo("details") }

C onClick = { navController.navigateUp() }

D onClick = { navController.popBackStack("details", false) }

💡 Hint

Use the navigate() method with the route string to move to a new screen.

navController.navigate("details") correctly triggers navigation to the "details" route. Other options either pop back or use invalid methods.

🔧 Debug

expert

Why does this Button not update its label when clicked?

Analyze the code below. Why does the Button label not change after clicking?

Android Kotlin

var count = 0
Button(onClick = { count++ }) {
  Text(text = "Clicked: $count")
}

A Because the Button's onClick lambda is empty and does not increment count.

B Because 'count' is not a state variable, Compose does not recompose the UI on change.

C Because the Text composable does not support string interpolation.

D Because the Button composable requires a modifier to update its content.

💡 Hint

Compose only updates UI when state variables change.

The variable 'count' is a normal variable, not wrapped in mutableStateOf, so Compose does not detect changes and does not recompose the Button's Text.