Jetpack Compose Basics
Jetpack Compose is Android's modern, declarative UI toolkit. Instead of inflating XML and poking at views, you write Kotlin functions that describe what the screen should look like.
Learn Jetpack Compose Basics in our free Kotlin course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a quick reference.
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 of this lesson you'll write @Composable functions, combine Text , Button , Column and Row , host them with setContent , and preview them in the IDE.
What You'll Learn in This Lesson
1️⃣ Your First Composable
A composable is a function marked with @Composable . It emits UI by calling other composables such as Text . Composables are named like types — starting with an uppercase letter.
Notice there's no XML and no findViewById . The function is the UI: call it and it draws.
2️⃣ Laying Out with Column and Row
Column stacks children vertically; Row places them horizontally. Button takes an onClick lambda and its own composable content.
You nest composables to build structure: a Column containing two Text elements and a Row of buttons.
3️⃣ Hosting and Previewing
setContent inside an Activity's onCreate hosts your composables. @Preview renders a composable in Android Studio without launching the app.
Your turn. Replace the TODO , then preview and compare.
Mini-Challenge: A Business Card
Build a small composable that stacks a few Text elements in a Column , then preview it.
Common Errors (and the fix)
- Forgetting @Composable — Calling Text(...) from a plain function won't compile. Annotate the caller with @Composable .
- Lowercase composable name — It compiles, but breaks convention and the IDE may warn. Name UI-emitting composables like types: Greeting , not greeting .
- Using setContentView — For Compose use setContent { ... } , not the old XML inflation call.
- @Preview with parameters — A @Preview composable must take no parameters; wrap your real composable in a parameterless preview.
Pro Tips
- 💡 Small composables compose: break screens into tiny reusable composables — they're cheap to call.
- 💡 Preview early and often: a parameterless @Preview gives instant visual feedback without running the app.
- 💡 Think in state: describe what the UI looks like, and let Compose handle redrawing.
📋 Quick Reference — Compose Basics
Concept
Kotlin / Compose
Composable
@Composable fun Greeting() { ... }
Text
Text("Hello")
Button
Button(onClick = { }) { Text("Go") }
Vertical stack
Column { ... }
Horizontal stack
Row { ... }
Host / preview
setContent { } • @Preview
Frequently Asked Questions
🎉 Lesson Complete!
- ✅ @Composable functions emit declarative UI
- ✅ Text and Button are core composables
- ✅ Column stacks vertically; Row horizontally
- ✅ setContent hosts composables in an Activity
- ✅ @Preview renders UI in the IDE
- ✅ Next lesson: State & Recomposition in Compose
Practice quiz
What annotation marks a function as a Compose UI building block?
- @Compose
- @Composable
- @UI
- @View
Answer: @Composable. @Composable marks a function that emits UI in Jetpack Compose.
Jetpack Compose follows which UI paradigm?
- Declarative
- Imperative XML inflation
- Retained-mode only
- Immediate-mode canvas only
Answer: Declarative. Compose is declarative: you describe the UI for a given state and the framework draws it.
Which composable displays a string of text?
- Label(...)
- TextView(...)
- Text(...)
- Print(...)
Answer: Text(...). Text("...") is the built-in composable for showing text.
Which layout composable stacks children vertically?
- Row
- Stack
- VBox
- Column
Answer: Column. Column arranges its children top to bottom; Row arranges them left to right.
How does an Activity set its Compose content?
- setContentView(R.layout.main)
- setContent { ... }
- inflate(...)
- attachCompose()
Answer: setContent { ... }. setContent { } inside onCreate hosts composables in an Activity.
What annotation lets you render a composable in the IDE design pane without running the app?
- @Preview
- @Render
- @Design
- @Mock
Answer: @Preview. @Preview on a parameterless composable shows it in Android Studio's preview pane.
Which composable arranges children horizontally?
- Column
- Pile
- Row
- Grid
Answer: Row. Row lays out its children in a horizontal line.
A composable function's name conventionally starts with what?
- a lowercase letter
- an underscore
- the prefix 'fun'
- an uppercase letter
Answer: an uppercase letter. By convention composables are named like types, starting with an uppercase letter (e.g. Greeting).
What does a @Composable function typically return?
- Unit (it emits UI rather than returning a value)
- A View object
- An XML string
- A Bitmap
Answer: Unit (it emits UI rather than returning a value). Most composables return Unit; they describe UI by calling other composables, not by returning a value.
Why must a @Composable function be called from another @Composable?
- For performance only
- It is a style preference
- Compose tracks calls in a composition, so the call site must itself be composable
- To avoid imports
Answer: Compose tracks calls in a composition, so the call site must itself be composable. Composables run inside a composition; only another composable provides that context.
Continue this course
- Previous: Capstone Project
- Next: State & Recomposition in Compose