Row: Place Things Side by Side
Lay out children left to right.
Row: Place Things Side by Side 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.
Side by Side
When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️
Your First Row
A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.
Row {
Text("Left")
Text("Right")
}Order Is Left to Right
Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.
A Classic Icon Plus Label
Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.
Row {
Icon(Icons.Default.Star, null)
Text("Favorite")
}Spacing Between Children
Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text("A")
Text("B")
}Aligning Children Vertically
Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.Star, null)
Text("Centered")
}Pushing Items Apart
Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Start")
Text("End")
}Sharing Space with Weight
Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.
Row {
Text("Half", Modifier.weight(1f))
Text("Half", Modifier.weight(1f))
}Rows Don't Scroll Yet
A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.
Adding Horizontal Scroll
For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.
Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
Text("Wide content")
}Rows Inside Columns
Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.
Quick Check
Let's confirm how a Row lays out its children.
Recap: Row
You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.
Frequently asked questions
Is the “Row: Place Things Side by Side” lesson free?
Yes — the full text of “Row: Place Things Side by Side” 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 “Row: Place Things Side by Side”?
Lay out children left to right. 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 “Row: Place Things Side by Side” 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
- Column: Stack Things Vertically
- Row: Place Things Side by Side
- Box: Layer & Overlap
- Arrangement & Alignment