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.

Practice

1. What is the main purpose of a Button composable in Android Jetpack Compose?

easy

A. To show lists of items

B. To display images on the screen

C. To create text input fields

D. To let users tap and trigger actions

Solution

1. Step 1: Understand the role of Button composable

   The Button composable is designed to be tapped by users to perform an action.

2. Step 2: Compare with other UI elements

   Other options like displaying images or text input are done by different composables, not Button.

3. Final Answer:

   To let users tap and trigger actions -> Option D

4. Quick Check:

   Button = triggers actions on tap [OK]

Hint: Buttons are for user taps that do something [OK]

Common Mistakes:

• Confusing Button with Image or TextField
• Thinking Button displays content only
• Assuming Button is for layout only

2. Which of the following is the correct syntax to create a Button with a label "Click Me" in Jetpack Compose?

easy

A. Button(onClick = { Text("Click Me") })

B. Button { onClick = { } Text("Click Me") }

C. Button(onClick = { }) { Text("Click Me") }

D. Button(Text("Click Me"), onClick = { })

Solution

1. Step 1: Recall Button syntax in Compose

   The Button composable takes an onClick lambda and a content lambda for the label.

2. Step 2: Check each option

   Button(onClick = { }) { Text("Click Me") } correctly places onClick and Text inside Button's trailing lambda. Others misuse syntax or parameter order.

3. Final Answer:

   Button(onClick = { }) { Text("Click Me") } -> Option C

4. Quick Check:

   Button(onClick) { Text } syntax [OK]

Hint: Button(onClick) { Text("label") } is correct pattern [OK]

Common Mistakes:

• Putting onClick inside Button's content lambda
• Passing Text as a parameter instead of inside lambda
• Wrong order or missing braces

3. What will be displayed when this code runs?

Button(onClick = { println("Tapped") }) {
  Text("Press Here")
}

medium

A. A text label "Press Here" with no button functionality

B. A button labeled "Press Here" that prints "Tapped" when clicked

C. A button labeled "Tapped" that prints "Press Here" when clicked

D. An error because println cannot be used inside onClick

Solution

1. Step 1: Identify the Button label

   The Button shows the Text composable with label "Press Here".

2. Step 2: Understand onClick behavior

   When tapped, the onClick lambda runs println("Tapped"), printing to console.

3. Final Answer:

   A button labeled "Press Here" that prints "Tapped" when clicked -> Option B

4. Quick Check:

   Button label = "Press Here", onClick prints "Tapped" [OK]

Hint: Button label is Text; onClick runs code inside braces [OK]

Common Mistakes:

• Confusing label text with printed output
• Thinking println causes UI error
• Assuming onClick changes label text

4. This code tries to create a Button but causes a compile error:

Button(onClick = println("Clicked")) {
  Text("Tap")
}

What is the error?

medium

A. onClick expects a lambda, but println("Clicked") is called immediately

B. Text composable cannot be inside Button

C. Button requires a label parameter, missing here

D. onClick cannot print text

Solution

1. Step 1: Analyze onClick parameter

   onClick expects a lambda () -> Unit, but println("Clicked") is a function call executed immediately.

2. Step 2: Understand correct lambda usage

   It should be onClick = { println("Clicked") } to pass a lambda that runs println when clicked.

3. Final Answer:

   onClick expects a lambda, but println("Clicked") is called immediately -> Option A

4. Quick Check:

   onClick needs lambda, not immediate call [OK]

Hint: Use curly braces {} for onClick lambda, not direct call [OK]

Common Mistakes:

• Calling function instead of passing lambda
• Misunderstanding onClick parameter type
• Thinking Text inside Button causes error

5. You want a Button that disables itself after being clicked once. Which approach correctly implements this behavior?

hard

A. Use a state variable to track clicks and set enabled = false after first click

B. Call Button(enabled = false) directly without state

C. Put enabled = false inside onClick lambda

D. Use Text composable with onClick instead of Button

Solution

1. Step 1: Understand Button enabled property

   The Button composable has an enabled parameter to control if it can be clicked.

2. Step 2: Use state to track clicks

   To disable after first click, use a state variable that changes on click and updates enabled.

3. Step 3: Evaluate options

   Use a state variable to track clicks and set enabled = false after first click correctly uses state to disable button after click. Others ignore state or misuse enabled.

4. Final Answer:

   Use a state variable to track clicks and set enabled = false after first click -> Option A

5. Quick Check:

   State controls enabled to disable button after click [OK]

Hint: Use state to toggle enabled property after click [OK]

Common Mistakes:

• Setting enabled false without state causes permanent disable
• Trying to disable inside onClick without state
• Using Text instead of Button for clickable UI