Compose Layouts, Modifiers & Lists

Real screens need structure: spacing, alignment, overlap, and scrolling lists. In Compose you achieve all of it with layout composables and modifiers .

Learn Compose Layouts, Modifiers & Lists in our free Kotlin course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a…

Part of the free Kotlin course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end you'll chain Modifier s, arrange children in Box , Column and Row , and render efficient scrolling lists with LazyColumn .

What You'll Learn in This Lesson

1️⃣ Modifiers and Order

A Modifier decorates a composable — size, padding, background, click behavior. You chain calls, and they apply in order from left to right.

Swap two modifiers and the visual result changes — a classic source of "why is my padding the wrong color?" confusion.

2️⃣ Box: Overlapping Children

Box stacks children on top of each other along the z-axis. You position each child with Modifier.align(...) .

For Column and Row , use verticalArrangement / horizontalArrangement for the main axis and the matching alignment for the cross axis.

3️⃣ Efficient Lists with LazyColumn

A plain Column composes every child eagerly. For long lists, LazyColumn composes only what's visible and uses the items() DSL.

Your turn. Replace the TODO , then run and compare.

Combine a Box , alignment, and a Column to center content on screen.

📋 Quick Reference — Layouts

Practice quiz

What is a Modifier used for in Compose?

  • To declare a new composable
  • To change a composable's size, padding, behavior, and appearance
  • To import packages
  • To define state

Answer: To change a composable's size, padding, behavior, and appearance. A Modifier decorates a composable: layout, drawing, padding, click behavior, and more.

How are modifiers combined?

  • By chaining calls: Modifier.padding(8.dp).fillMaxWidth()
  • By a comma-separated list
  • By the '+' operator only
  • They cannot be combined

Answer: By chaining calls: Modifier.padding(8.dp).fillMaxWidth(). Modifiers chain fluently; each call returns a new Modifier.

Why does modifier order matter?

  • It never matters
  • Only for color modifiers
  • Modifiers are applied in sequence, so padding-then-background differs from background-then-padding
  • Alphabetical order is required

Answer: Modifiers are applied in sequence, so padding-then-background differs from background-then-padding. Modifiers apply left to right, so order changes the visual result.

Which composable overlaps its children on top of each other?

  • Column
  • Row
  • Stack
  • Box

Answer: Box. Box stacks children along the z-axis, overlapping them; you align each within it.

Which composable lazily renders a vertically scrolling list?

  • LazyColumn
  • Column
  • ScrollView
  • RecyclerColumn

Answer: LazyColumn. LazyColumn only composes the items currently visible, like RecyclerView.

Inside a LazyColumn, how do you emit many items from a list?

  • for (x in list) Item(x)
  • forEach { Item(it) }
  • items(list) { Item(it) }
  • repeat(list.size)

Answer: items(list) { Item(it) }. The items(list) { } DSL function emits a child for each element lazily.

Which parameter controls spacing along a Column's main (vertical) axis?

  • horizontalAlignment
  • contentScale
  • verticalArrangement
  • padding only

Answer: verticalArrangement. verticalArrangement (e.g. Arrangement.spacedBy) positions children along a Column's main axis.

In a Row, which parameter aligns children on the cross (vertical) axis?

  • verticalAlignment
  • horizontalArrangement
  • verticalArrangement
  • contentAlignment

Answer: verticalAlignment. A Row's cross axis is vertical, so verticalAlignment (e.g. Alignment.CenterVertically) applies.

Which modifier makes a composable as wide as its parent allows?

  • Modifier.wrapContent()
  • Modifier.matchParent()
  • Modifier.fillMaxWidth()
  • Modifier.expand()

Answer: Modifier.fillMaxWidth(). Modifier.fillMaxWidth() stretches the composable to the parent's full width.

Why prefer LazyColumn over a Column for a long list?

  • LazyColumn centers text automatically
  • Column cannot hold more than 10 items
  • LazyColumn requires no imports
  • LazyColumn only composes visible items, so it is efficient for large lists

Answer: LazyColumn only composes visible items, so it is efficient for large lists. A plain Column composes every child eagerly; LazyColumn composes lazily as you scroll.