Composable Functions & Previews — Android Course

What you'll learn

Composables become powerful when they take parameters — then one function can render any data you pass it, and you build a whole screen by composing small, reusable pieces. This module also introduces recomposition, the engine that keeps your UI in sync with your data.

By the end you'll be able to:

Pass parameters to composables to make them reusable
Compose screens from smaller composables
Explain what recomposition is
Configure previews for different scenarios

Parameters

A composable takes parameters exactly like any Kotlin function. Passing data in makes it reusable — instead of a composable hard-coded to one name, you get one that renders any name. Default values work too, so callers can omit optional parameters.

Reusing composables

This is how real UIs are built: define a small composable once, then call it repeatedly with different data. Here a ProfileCard is reused to build a team list — and notice a composable (Team) is made entirely of calls to other composables:

Team.kt

@Composable
fun ProfileCard(name: String, role: String) {
    Column {
        Text(text = name)
        Text(text = role)
    }
}

@Composable
fun Team() {
    Column {
        ProfileCard(name = "Ada", role = "Engineer")
        ProfileCard(name = "Linus", role = "Maintainer")
    }
}

Focused example: keep your generated package and theme. Add the shown APIs to your Compose project using Android Studio imports.

9:41

Ada

Engineer

Linus

Maintainer

Team() — how this renders on a device

Key idea

Small, focused, reusable composables are the goal. A screen is a tree of composables — a Screen calls a Header and a List, the list calls many Rows, and so on. Compose it like Lego, from small blocks up.

Recomposition

When observable state read during composition changes, Compose schedules affected composition work to update the screen — this is called recomposition. You never manually update the UI; you change the data, and Compose updates the parts that depend on it. Compose can skip eligible calls when their inputs have not changed. Skipping is an optimization, not a promise that a function executes exactly once per change.

Note

Because a composable can re-run at any time (and often), it should be fast and free of side effects — don't start network calls or mutate global state directly inside one. Think of the composable body as simply describing the UI for the current data. You'll learn the correct place for side effects in Phase 5.

Configured previews

Previews take parameters to simulate real conditions. Stack several on one composable to check it in light and dark themes, at different font sizes, or on different screen widths — all without running the app:

ProfileCardPreview.kt

import android.content.res.Configuration

@Preview(name = "Light", showBackground = true)
@Preview(
    name = "Dark",
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
fun ProfileCardPreview() {
    MyAppTheme {
        ProfileCard(name = "Ada", role = "Engineer")
    }
}

Focused example: keep your generated package and theme. Add the shown APIs to your Compose project using Android Studio imports.

Practice: one small working feature

Give a greeting composable a name parameter. Call it with two different names in two previews.

Check your result

Both previews use one implementation and show their own supplied names.

Remember

Recomposition can repeat a composable call. Keep the body free of operations that change external state.

Recap & quick check

Key takeaways

Composables take parameters like any function, which makes them reusable with different data.
Build screens by composing small composables into a tree — call composables inside composables.
Recomposition updates affected UI when observable state read during composition changes.
Compose can skip eligible calls with unchanged inputs; do not depend on an exact execution count.
Keep composable bodies fast and side-effect-free — they may re-run frequently.

Quick check

1. Why pass parameters to a composable?

2. What is recomposition?

3. How does Compose keep recomposition efficient?

4. Why should a composable body avoid side effects?

5. How do you preview a composable in both light and dark themes?

You can build reusable UI now. Next we style it — mastering Text and the Modifier system that shapes every composable.