weight & Flexible Sizing
Distribute space proportionally in rows and columns.
weight & Flexible Sizing is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 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.
Flexible Space
Sometimes you want children to share space, not take fixed sizes. The weight modifier divides leftover room proportionally. ⚖️
Where weight Lives
weight works only inside a Row or Column. It is part of the layout scope those containers provide to their children.
Equal Split
Give two children the same weight and they share the space evenly, each taking half of what is available.
Box(Modifier.weight(1f))
Box(Modifier.weight(1f))Uneven Split
Weights are ratios. A child with weight(2f) gets twice the space of a sibling with weight(1f).
Box(Modifier.weight(2f))
Box(Modifier.weight(1f))Fixed Plus Flexible
Mix and match: give one child a fixed size and let another use weight to absorb whatever space remains.
Box(Modifier.width(80.dp))
Box(Modifier.weight(1f))Push to the Edge
A single weight on a spacer acts like a push, sending the next child all the way to the far end of the row.
Text("Left")
Spacer(Modifier.weight(1f))
Text("Right")Weights Run First
Compose measures fixed children first, then splits the leftover space among weighted ones. That is why weight needs siblings to push against.
The fill Flag
By default a weighted child fills its share. Pass fill = false to let it stay smaller than the space it was given.
Modifier.weight(1f, fill = false)Weighted Columns
The same idea works vertically. In a Column, weight divides the leftover height instead of width.
Column {
Box(Modifier.weight(1f))
Box(Modifier.weight(1f))
}Responsive by Design
Because weights are ratios, your layout scales gracefully across phone and tablet widths without hardcoded numbers.
A Common Pattern
Label on the left, value filling the rest: a weighted row is the classic recipe for clean settings and list rows.
Row {
Text("Name")
Text("Sam", Modifier.weight(1f))
}Quick Check
Two children sit in a Row with weight(3f) and weight(1f). How is the space shared?
Recap
You can now share space flexibly. weight splits leftover room by ratio inside Rows and Columns for responsive layouts. 🎯
Frequently asked questions
Is the “weight & Flexible Sizing” lesson free?
Yes — the full text of “weight & Flexible Sizing” 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 “weight & Flexible Sizing”?
Distribute space proportionally in rows and columns. 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 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “weight & Flexible Sizing” 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
- Padding, Size & fillMaxWidth
- Background, Border & Clip
- Why Modifier Order Matters
- weight & Flexible Sizing