Android Academy · Lesson

Column, Row, and Box

Arrange composables in common layouts.

Lesson 1 of 413 steps

Column, Row, and Box is a free Android Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, and your progress syncs across the web and the CoddyKit app. The Android Academy course includes 4 lessons in total.

Arranging Composables

To place composables relative to each other, Compose gives you three core layout composables: Column, Row, and Box.

Column: Vertical Stack

Column stacks its children vertically, top to bottom.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: Horizontal Stack

Row places its children side by side, left to right.

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box: Overlapping

Box stacks children on top of each other, like layers. Later children draw over earlier ones. Great for badges, overlays, and backgrounds.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Children Are Content Lambdas

Each layout takes a trailing content lambda. Whatever composables you call inside become its children. There is no XML — children are just function calls.

Nesting Layouts

Layouts nest freely. Put a Row inside a Column to build a grid-like structure or a list of rows.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column vs LinearLayout

If you used XML, Column is like a vertical LinearLayout and Row is a horizontal one. Box is like a simple FrameLayout.

Default Sizing

By default a layout is only as big as its children (wrap content). You can make it fill available space with modifiers like Modifier.fillMaxSize(), covered in the next lesson.

contentAlignment in Box

Box can align all its children with contentAlignment. For example, center everything.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Choosing the Right One

Pick based on direction: Column for vertical, Row for horizontal, Box for overlapping or single-child centering. Most screens combine all three.

Putting It Together

A small profile layout using all three.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Quick Check

Which layout stacks its children on top of each other (overlapping)?

Answer it in the interactive lesson

Recap

Three core layouts:

Column — vertical stack.
Row — horizontal stack.
Box — overlapping layers; contentAlignment centers content.

They nest freely to build any screen.

Free to start

Learn Kotlin with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 36
Lessons: 152

Start learning free View the full course

Frequently Asked Questions

Is the “Column, Row, and Box” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Column, Row, and Box”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Android Academy course includes 4 lessons in total.

What will I learn in “Column, Row, and Box”?

Arrange composables in common layouts. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Column, Row, and Box” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy