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.