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.

Practice

1. What is the main purpose of a Box layout in Android Kotlin Compose?

easy

A. To create a scrollable list of items

B. To arrange child views horizontally in a row

C. To arrange child views vertically in a column

D. To stack child views on top of each other

Solution

1. Step 1: Understand Box layout behavior

   A Box stacks its children, placing them on top of each other in the same space.

2. Step 2: Compare with other layouts

   Row arranges horizontally, Column vertically, and LazyColumn scrolls. Box is unique for stacking.

3. Final Answer:

   To stack child views on top of each other -> Option D

4. Quick Check:

   Box stacks views = A [OK]

Hint: Box stacks children; Row and Column arrange horizontally/vertically [OK]

Common Mistakes:

• Confusing Box with Row or Column layouts
• Thinking Box arranges children side by side
• Assuming Box creates scrollable content

2. Which of the following is the correct way to align a child view to the bottom end inside a Box in Jetpack Compose?

easy

A. Modifier.align(Alignment.BottomEnd)

B. Modifier.align(Alignment.CenterStart)

C. Modifier.align(Alignment.Center)

D. Modifier.align(Alignment.TopStart)

Solution

1. Step 1: Identify alignment for bottom end

   Bottom end means bottom right corner in left-to-right layouts.

2. Step 2: Match with Alignment constants

   Alignment.BottomEnd places the child at bottom right inside the Box.

3. Final Answer:

   Modifier.align(Alignment.BottomEnd) -> Option A

4. Quick Check:

   Bottom end alignment = Modifier.align(Alignment.BottomEnd) [OK]

Hint: Bottom end means bottom right corner, use Alignment.BottomEnd [OK]

Common Mistakes:

• Using TopStart instead of BottomEnd
• Confusing Center with BottomEnd
• Forgetting to use Modifier.align()

3. What will be the visible result of this Compose code?

Box(modifier = Modifier.size(100.dp)) {
  Text("A", Modifier.align(Alignment.TopStart))
  Text("B", Modifier.align(Alignment.Center))
  Text("C", Modifier.align(Alignment.BottomEnd))
}

medium

A. Texts A, B, and C stacked exactly on top of each other at the center

B. Texts A at top-left, B at center, and C at bottom-right inside the Box

C. Only Text C is visible at bottom-right, others are hidden

D. Texts A and B overlap at top-left, C is at bottom-right

Solution

1. Step 1: Understand Box stacking with alignment

   Box stacks children but each child is positioned by its Modifier.align() setting.

2. Step 2: Check each Text alignment

   Text A is top-left, Text B is center, Text C is bottom-right, so all are visible at different positions.

3. Final Answer:

   Texts A at top-left, B at center, and C at bottom-right inside the Box -> Option B

4. Quick Check:

   Box children align independently = B [OK]

Hint: Each child aligns separately inside Box, no overlap unless same alignment [OK]

Common Mistakes:

• Assuming all texts overlap at center
• Thinking only last child is visible
• Ignoring Modifier.align() effects

4. Identify the error in this Box layout code snippet:

Box {
  Text("Hello")
  Text("World", Modifier.align(Alignment.Center))
  Text("!", Modifier.align(Alignment.Center))
}

medium

A. Multiple children cannot have the same alignment inside a Box

B. Box requires a size modifier to display children

C. The code is valid but texts "World" and "!" will overlap at center

D. Text composables must have unique keys inside Box

Solution

1. Step 1: Check alignment usage

   Multiple children can share the same alignment; Box stacks them.

2. Step 2: Analyze visual result

   Texts "World" and "!" both align center, so they overlap visually.

3. Final Answer:

   The code is valid but texts "World" and "!" will overlap at center -> Option C

4. Quick Check:

   Same alignment causes overlap, no syntax error [OK]

Hint: Same alignment stacks children visually overlapping [OK]

Common Mistakes:

• Thinking same alignment causes error
• Assuming Box needs size modifier always
• Confusing keys requirement with lists

5. You want to create a notification badge over an icon using a Box layout. Which approach correctly places a small red circle at the top-right corner of the icon?

hard

A. Place the icon and badge inside a Box; use Modifier.align(Alignment.TopEnd) on the badge

B. Place the icon and badge inside a Row; use Modifier.padding() on the badge

C. Place the icon and badge inside a Column; use Modifier.align(Alignment.Center) on the badge

D. Place the icon and badge inside a Box; use Modifier.align(Alignment.BottomStart) on the badge

Solution

1. Step 1: Understand Box usage for overlays

   Box stacks children, so placing icon and badge inside Box allows overlay.

2. Step 2: Position badge at top-right

   Modifier.align(Alignment.TopEnd) places badge at top-right corner of Box (icon).

3. Final Answer:

   Place the icon and badge inside a Box; use Modifier.align(Alignment.TopEnd) on the badge -> Option A

4. Quick Check:

   Box + align TopEnd = badge overlay top-right [OK]

Hint: Use Box and Modifier.align(Alignment.TopEnd) for top-right badge [OK]

Common Mistakes:

• Using Row or Column which don't stack children
• Aligning badge at bottom or center instead of top-right
• Not using Modifier.align() on badge