Composable Functions & Previews

What makes a function composable

A composable is just a Kotlin function annotated with @Composable. By convention its name starts with a capital letter (like a UI element). It emits UI and can call other composables, but it should behave like a pure function: given the same inputs, it produces the same UI.

@Composable
fun ProfileCard(name: String, role: String) {
    Column {
        Text(name, style = MaterialTheme.typography.titleMedium)
        Text(role, style = MaterialTheme.typography.bodySmall)
    }
}

Composables should be side-effect free

A composable can run many times (every recomposition) and in any order. So never do things like network calls or start timers directly in the function body — you’ll learn the correct “side-effect” tools in a later lesson. Keep composables focused on describing UI.

Building bigger screens from small pieces

@Composable
fun ProfileScreen(user: User) {
    Column(modifier = Modifier.padding(16.dp)) {
        ProfileCard(user.name, user.role)
        Spacer(Modifier.height(12.dp))
        StatsRow(user.posts, user.followers)
    }
}

Each small composable is reusable and easy to read — this is the core of good Compose code.

The Preview: see UI without running the app

One of Compose’s best features: annotate a composable with @Preview and Android Studio renders it live in the editor, no emulator needed.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    MaterialTheme {
        ProfileCard(name = "Anand Gaur", role = "Android Developer")
    }
}

You can have many previews, preview in dark mode, different font sizes, or device sizes — all at once.

Passing content with trailing lambdas (slots)

Many composables accept other composables as a parameter, called the “slot” pattern. This is why you often see { } after a composable call:

@Composable
fun Card(content: @Composable () -> Unit) {
    Surface(tonalElevation = 2.dp) { content() }
}

// usage
Card {
    Text("Inside the card")
}

Common mistakes

Doing logic/network calls directly inside a composable body.
Forgetting to wrap previews in MaterialTheme (colors/fonts look off).
Making giant composables — break them into small, named pieces.

Summary: Composables are pure-ish functions that describe UI. Build screens from small reusable pieces, use @Preview to iterate fast, and pass UI via slot lambdas.