Layouts, Modifiers & Theming
Build adaptive shared screens with Material.
Layouts, Modifiers & Theming is a free Kotlin Multiplatform 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 Kotlin Multiplatform Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Three Layout Building Blocks
Almost every screen is built from Column, Row and Box. Column stacks children vertically, Row places them side by side, Box layers them.
Column {
Text("Top")
Text("Bottom")
}Rows Place Items Side by Side
A Row arranges its children horizontally. Reach for it when you want a label and a value, or an icon next to text, on one line.
Row {
Text("Price:")
Text("$9")
}Box for Stacking
A Box overlaps its children on the same spot. It is perfect for a badge on top of an avatar or text centered over an image.
Box {
Image(painter, null)
Text("New")
}Modifiers Shape Everything
A Modifier adjusts size, spacing, background and more. You chain calls in order, and the order genuinely changes the result.
Text(
"Hi",
modifier = Modifier.padding(16.dp)
)Order Matters in Chains
Modifiers apply top to bottom. Padding before background insets the color, while background before padding fills behind the padding. Read them like steps.
Modifier
.background(Blue)
.padding(8.dp)Fill and Size the Space
Use fillMaxWidth, fillMaxSize or fixed size to control how much room a composable claims inside its parent layout.
Column(Modifier.fillMaxSize()) {
Text("Stretched")
}Arrangement and Alignment
Layout parameters like Arrangement and Alignment position children, for example centering a Row or spacing items evenly across it.
Row(
horizontalArrangement = Arrangement.SpaceBetween
) { }Theming with MaterialTheme
Wrap your app in MaterialTheme to supply a color scheme, typography and shapes. Every Material component reads from it automatically.
MaterialTheme(colorScheme = darkColorScheme()) {
App()
}Read Theme Values Anywhere
Inside the theme you access tokens through MaterialTheme.colorScheme and typography, so your styling stays consistent across every shared screen.
Text(
"Title",
color = MaterialTheme.colorScheme.primary
)Adapt to Each Platform
The same layout code runs everywhere, yet you can branch on size or platform to make screens adaptive for phones, tablets and desktops.
Consistent by Default
Because layouts, modifiers and theming are all shared, your Android and iOS screens look the same without anyone duplicating styling work.
Quick Check
What does a Modifier do?
Recap: Layout, Modify, Theme
You stacked UI with Column, Row and Box, shaped it with chained modifiers, and applied a shared MaterialTheme so every platform stays consistent. 🎨
Frequently asked questions
Is the “Layouts, Modifiers & Theming” lesson free?
Yes — the full text of “Layouts, Modifiers & Theming” is free to read here on the web, and the Kotlin Multiplatform 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 Kotlin Multiplatform Academy course, upgrade to CoddyKit PRO.
What will I learn in “Layouts, Modifiers & Theming”?
Build adaptive shared screens with Material. You practise Kotlin Multiplatform 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 Kotlin Multiplatform Academy?
No prior experience is required. Kotlin Multiplatform 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 “Layouts, Modifiers & Theming” 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 Kotlin Multiplatform Academy lesson?
Yes. Every Kotlin Multiplatform 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
- Enable Compose Multiplatform
- Layouts, Modifiers & Theming
- State & Recomposition in Shared UI
- Host Shared UI on iOS & Desktop