Why advanced Compose creates rich UIs in Android Kotlin - Challenge Your Understanding

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you use Modifier.padding in Compose?

In Jetpack Compose, what is the visual effect of applying Modifier.padding(16.dp) to a Text composable?

Android Kotlin

Text("Hello", modifier = Modifier.padding(16.dp))

A The text moves inward by 16.dp from all sides, creating space around it.

B The text size increases by 16.dp.

C The text color changes to a lighter shade.

D The text becomes clickable.

💡 Hint

Think about what padding means in everyday life, like adding space inside a box.

Modifier.padding adds space inside the composable's boundary, pushing the content inward and creating empty space around it.

❓ lifecycle

intermediate

When does Compose recomposition happen?

In Jetpack Compose, which of the following triggers recomposition of a composable function?

Android Kotlin

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

A When the app is launched only.

B When the state variable 'count' changes.

C When the device orientation changes only.

D When the user taps anywhere on the screen.

💡 Hint

Think about what causes the UI to update when data changes.

Compose automatically recomposes when a state variable used inside a composable changes, updating the UI accordingly.

❓ navigation

advanced

How does Compose Navigation handle back stack?

In Jetpack Compose Navigation, what happens when you call navController.navigate("screenB") and then press the back button?

Android Kotlin

navController.navigate("screenB")

A Nothing happens; the back button is disabled.

B The app closes immediately.

C The app returns to the previous screen (screenA) by popping screenB from the back stack.

D The app navigates to screenB again, creating a loop.

💡 Hint

Think about how back stacks work in real life, like pages in a book.

Navigation adds screens to a stack. Pressing back removes the top screen, returning to the previous one.

📝 Syntax

advanced

What is the output of this Compose code snippet?

Consider this code snippet in Jetpack Compose. What text will be displayed?

Android Kotlin

var name by remember { mutableStateOf("Alice") }
Column {
  Text("Hello, $name")
  Button(onClick = { name = "Bob" }) {
    Text("Change Name")
  }
}

A Shows 'Hello, Alice' and button does nothing.

B Always shows 'Hello, Bob' regardless of clicks.

C Throws a compile-time error due to incorrect state usage.

D Initially shows 'Hello, Alice', then changes to 'Hello, Bob' after button click.

💡 Hint

Remember how state variables update UI in Compose.

The Text composable reads the state variable 'name'. Clicking the button updates 'name', triggering recomposition and updating the text.

🧠 Conceptual

expert

Why does Compose enable building rich UIs efficiently?

Which of the following best explains why Jetpack Compose allows developers to create rich and dynamic UIs more efficiently than traditional Android Views?

A Compose uses declarative UI, where UI is described as functions of state, enabling automatic updates and less boilerplate.

B Compose requires manual view inflation and XML parsing, which improves performance.

C Compose disables recomposition to avoid UI updates, making it faster.

D Compose only supports static layouts, so it is simpler to build UIs.

💡 Hint

Think about how describing UI as a function of data helps keep UI in sync.

Compose's declarative approach means developers write UI as functions that react to state changes, reducing errors and boilerplate code.