Box layout in Android Kotlin - Mini App: Build & Ship

Build: BoxLayoutScreen

This screen demonstrates a simple box layout using LinearLayout in Android Kotlin. It arranges three colored boxes vertically with equal spacing.

Target UI

┌───────────────────────────┐
│        Box Layout         │
├───────────────────────────┤
│  ┌───────────────┐        │
│  │   Red Box     │        │
│  └───────────────┘        │
│                           │
│  ┌───────────────┐        │
│  │  Green Box    │        │
│  └───────────────┘        │
│                           │
│  ┌───────────────┐        │
│  │  Blue Box     │        │
│  └───────────────┘        │
└───────────────────────────┘

Use a vertical LinearLayout as the container

Add three Views representing boxes with background colors: red, green, and blue

Each box should have equal height and fill the width of the screen with some margin

Add spacing between the boxes

Use Kotlin and Android XML layout

Starter Code

Android Kotlin

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/boxLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- TODO: Add three colored boxes here -->

</LinearLayout>

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/boxLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF0000"
        android:layout_marginBottom="8dp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#00FF00"
        android:layout_marginBottom="8dp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#0000FF" />

</LinearLayout>

We use a vertical LinearLayout to stack boxes vertically.

Each View acts as a colored box with a background color: red, green, and blue.

Setting layout_height to 0dp and layout_weight to 1 makes all boxes share equal height.

Margins add space between boxes for better look.

The boxes fill the width because layout_width is match_parent.

Final Result

Completed Screen

┌───────────────────────────┐
│        Box Layout         │
├───────────────────────────┤
│  ┌───────────────┐        │
│  │███████████████│        │
│  │███████████████│        │
│  │███████████████│        │
│  └───────────────┘        │
│                           │
│  ┌───────────────┐        │
│  │███████████████│        │
│  │███████████████│        │
│  │███████████████│        │
│  └───────────────┘        │
│                           │
│  ┌───────────────┐        │
│  │███████████████│        │
│  │███████████████│        │
│  │███████████████│        │
│  └───────────────┘        │
└───────────────────────────┘

The screen shows three colored boxes stacked vertically: red on top, green in the middle, blue at bottom

Boxes fill the width with spacing between them

No user interaction needed for this layout demonstration

Stretch Goal

Add a button below the boxes that changes the color of the middle box when tapped.

💡 Hint

Use a Button widget and set an OnClickListener in Kotlin code to change the background color of the green box View.

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