Column, Row, and Box
Arrange composables in common layouts.
Column, Row, and Box is a free Android Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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)?
Recap
Three core layouts:
Column— vertical stack.Row— horizontal stack.Box— overlapping layers;contentAlignmentcenters content.
They nest freely to build any screen.
Frequently asked questions
Is the “Column, Row, and Box” lesson free?
Yes — the full text of “Column, Row, and Box” is free to read here on the web, and the Android Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
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
- Column, Row, and Box
- The Modifier System
- Alignment and Arrangement
- Lists with LazyColumn