Layouts & Modifiers (Column, Row, Box)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Layouts & Modifiers (Column, Row, Box) without any of the intimidation
Be able to run Android Studio/Compose code yourself
Apply this concept immediately in a real project

Let's think about it for a second

Column arranges its child composables vertically (top to bottom) — Row arranges them horizontally (left to right). Box places its child composables on top of one another (overlapping), which is handy for things like a text overlay on an image. Modifier is the toolkit you use to customize a composable's appearance/behavior (padding, size, background color, clickable) by chaining calls together, like `.padding(16.dp).background(Color.Blue)`.

Let's connect this to a real-world scenario

When designing a login screen, you could stack the logo (Image), email TextField, password TextField, and login Button vertically inside a `Column` — adding `Modifier.padding(16.dp)` to the Column gives you spacing between the screen edges and the content.

Column = vertical layout, Row = horizontal layout, Box = overlapping layout
Modifier = customize padding/size/background/clickable by chaining calls
Modifier order matters (padding-first vs background-first can give different results)

Let's look at an example together

kotlin

@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome Back", fontSize = 24.sp)
        Spacer(modifier = Modifier.height(16.dp))
        Row {
            Icon(Icons.Default.Email, contentDescription = null)
            Text("email@example.com")
        }
    }
}

You should see

You should see, on the emulator, an email icon plus text laid out as a row below the 'Welcome Back' text.

Try it in 5 minutes

Expand `LoginScreen` yourself — add email/password TextFields and a Login Button inside the Column, then run it on the emulator.

A quick word of caution

Overusing `Modifier.fillMaxSize()` on nested composables can make it hard to predict the actual layout size — use it only at the root level, and use specific sizes/weights for children instead.

Easy traps

Not paying attention to modifier order — `.padding(16.dp).background(Color.Blue)` and `.background(Color.Blue).padding(16.dp)` produce different visual results
Nesting Column/Row inside each other so many times it becomes a tangled mess — you should break things into separate components instead

Now try it yourself

Expand `LoginScreen` yourself — add email/password TextFields and a Login Button inside the Column, then run it on the emulator.

You'll know it worked when: You should see, on the emulator, an email icon plus text laid out as a row below the 'Welcome Back' text.