0Pricing
Jetpack Compose Academy · Lesson

Writing a Layout Composable

Measure children and position them by hand.

Writing a Layout Composable is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 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 Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Meet the Layout Composable

To build your own arrangement, you reach for the Layout composable. It hands you the raw measure-and-place power directly. 🛠️

Layout Takes Content and a Lambda

Layout accepts your child content plus a measure lambda. The lambda receives the measurables and the constraints to work with.

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

Step One: Measure the Children

Inside the lambda, map over the measurables and measure each one. You get a list of placeables with known sizes back.

val placeables = measurables.map { it.measure(constraints) }

Step Two: Decide Your Own Size

Now compute how big your layout should be. For a vertical stack, the height is the sum of child heights and the width is the widest child.

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

Step Three: Report Size with layout()

Call layout(width, height) to declare your size. The trailing lambda is where you actually position every child.

layout(width, height) {
  // placement goes here
}

Step Four: Place Each Child

Track a running y offset and place each placeable beneath the last. Add its height to the offset after each placeRelative call.

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

You Just Rebuilt Column

Stacking children top to bottom is exactly what Column does. You have now written a layout from scratch that behaves just like it. 🎉

Wrap It in a Reusable Function

Put your Layout call inside a @Composable function so others can use it like any built-in. Expose a modifier and content slot.

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

Pass the Modifier Through

Forward the incoming modifier to the Layout call. This lets callers add padding, size, and background just like with real layouts.

Default the Modifier Parameter

Give modifier a default of Modifier. Callers who do not need extra styling can skip it, keeping your API clean and friendly.

Now You Can Customize Anything

Change the placement math and you get diagonal stacks, centered rows, or grids. The Layout composable is your blank canvas for arrangement.

Quick Check

Which method actually positions a measured child on screen?

Recap: Writing a Layout Composable

Inside Layout you measure children to placeables, call layout() to set your size, then placeRelative each child. Wrap it in a function for reuse. ✅

Frequently asked questions

Is the “Writing a Layout Composable” lesson free?

Yes — the full text of “Writing a Layout Composable” is free to read here on the web, and the Jetpack Compose 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 Jetpack Compose Academy course, upgrade to CoddyKit PRO.

What will I learn in “Writing a Layout Composable”?

Measure children and position them by hand. You practise Jetpack Compose 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 Jetpack Compose Academy?

No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Writing a Layout Composable” 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 Jetpack Compose Academy lesson?

Yes. Every Jetpack Compose 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

  1. The Measure & Place Model
  2. Writing a Layout Composable
  3. Constraints & Intrinsic Measurements
  4. A FlowRow That Wraps Chips
← Back to Jetpack Compose Academy