Lesson 8: Layouts in Compose: Column, Row, and Box

Layouts in Compose: Column, Row, and Box

Almost every screen you'll ever build is some combination of three layout composables. Learn these well — they're the foundation of everything visual in Compose.

Column — stacks items vertically

@Composable
fun ProfileCard() {
    Column {
        Text("Ahmad Najar")
        Text("Lead Mobile Engineer")
    }
}

Row — arranges items horizontally

@Composable
fun IconAndLabel() {
    Row {
        Text("⭐")
        Text("Favorite")
    }
}

Box — stacks items on top of each other

@Composable
fun ImageWithBadge() {
    Box {
        Text("📷") // acts as a background layer
        Text("NEW") // drawn on top of it
    }
}

Box is how you create overlapping effects — a badge on a photo, text over an image, a loading spinner centered over content.

Combining them

@Composable
fun TaskItem() {
    Row {
        Column {
            Text("Buy groceries")
            Text("Due today")
        }
    }
}

Almost every real screen is Rows containing Columns containing more Rows — nesting these three primitives is genuinely most of what layout in Compose is.

Try it yourself

Update your Greeting composable to show a Column with two lines of text instead of one. Use the @Preview from lesson 6 to check your work without running the emulator.

Next: Lesson 9 — controlling spacing, padding, and size with Modifiers.