Box layout in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Box layout stacking order

Given a Box layout with three overlapping Text composables, which Text will appear on top?

Android Kotlin

Box {
  Text("First", modifier = Modifier.align(Alignment.Center))
  Text("Second", modifier = Modifier.align(Alignment.Center))
  Text("Third", modifier = Modifier.align(Alignment.Center))
}

A "First" is on top

B "Second" is on top

C "Third" is on top

D All texts appear side by side

💡 Hint

Think about the order composables are declared inside the Box.

In a Box layout, children declared later are drawn on top of earlier ones. So the last Text composable "Third" appears on top.

❓ ui_behavior

intermediate

Box layout alignment behavior

What will be the position of a Text composable inside a Box with modifier.align(Alignment.BottomEnd)?

Android Kotlin

Box(modifier = Modifier.size(100.dp)) {
  Text("Hello", modifier = Modifier.align(Alignment.BottomEnd))
}

A Text appears at the top-left corner

B Text appears at the bottom-right corner

C Text appears centered

D Text fills the entire Box

💡 Hint

Alignment.BottomEnd means bottom and right edges.

Modifier.align(Alignment.BottomEnd) places the composable at the bottom-right corner inside the Box.

❓ lifecycle

advanced

Box layout size with multiple children

If a Box contains two children with fixed sizes 100.dp and 150.dp, what will be the size of the Box by default?

Android Kotlin

Box {
  Box(modifier = Modifier.size(100.dp)) {}
  Box(modifier = Modifier.size(150.dp)) {}
}

A Box size will be 150.dp by 150.dp

B Box size will be 100.dp by 100.dp

C Box size will be 250.dp by 250.dp

D Box size will be zero because no size modifier on parent

💡 Hint

Box size depends on the largest child by default.

By default, Box sizes itself to fit the largest child. So it will be 150.dp by 150.dp.

📝 Syntax

advanced

Correct syntax for Box with padding and background

Which option correctly applies 16.dp padding and a red background color to a Box?

A Box(modifier = Modifier.padding(16.dp).background(Color.Red)) {}

B Box(modifier = Modifier.background(Color.Red).padding(16.dp)) {}

C Box(modifier = Modifier.padding(16).background(Color.Red)) {}

D Box(modifier = Modifier.padding(16.dp).background(red)) {}

💡 Hint

Order of modifiers affects layout and appearance.

Padding should come before background to apply padding inside the background. Also, 16.dp is required, and Color.Red must be capitalized.

🧠 Conceptual

expert

Box layout vs Column layout behavior

Which statement best describes the difference between Box and Column layouts in Jetpack Compose?

A Box arranges children horizontally; Column stacks children on top of each other.

B Box arranges children in a grid; Column arranges children in a circle.

C Box and Column both arrange children vertically but Box adds padding automatically.

D Box stacks children on top of each other; Column arranges children vertically one after another.

💡 Hint

Think about how children are placed visually in each layout.

Box overlays children, stacking them; Column places children vertically in order.