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.
Build a small composable that stacks a few Text elements in a Column , then preview it.
📋 Quick Reference — Compose Basics
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.