What Is Jetpack Compose and Why Should You Learn It?

For over a decade, Android UI meant XML layouts plus Kotlin or Java code that found views and mutated them. Jetpack Compose replaces that with something simpler to describe: UI is a function of state. You write Kotlin functions that describe what the screen should look like, and Compose keeps the screen in sync as the state changes.

What Jetpack Compose is

Jetpack Compose is Google's declarative UI toolkit for Android, written in Kotlin and stable since 2021. It's the toolkit Google recommends for new Android UI. It includes:

• a runtime that tracks state and decides what to update,
• a Kotlin compiler plugin that transforms @Composable functions,
• UI and foundation libraries: layout, drawing, gestures, text and lazy lists,
• Material 3 components and theming,
• tooling: previews, Layout Inspector integration and testing APIs.

What Compose code looks like

@Composable
fun ProfileCard(name: String, role: String, isOnline: Boolean, onMessage: () -> Unit) {
    Card(Modifier.fillMaxWidth().padding(16.dp)) {
        Row(Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
            Box(
                Modifier.size(12.dp).clip(CircleShape)
                    .background(if (isOnline) Color(0xFF22C55E) else Color.Gray)
            )
            Column(Modifier.weight(1f).padding(horizontal = 12.dp)) {
                Text(name, style = MaterialTheme.typography.titleMedium)
                Text(role, style = MaterialTheme.typography.bodyMedium)
            }
            Button(onClick = onMessage) { Text("Message") }
        }
    }
}

There's no XML, no findViewById and no adapter. Structure, styling and behaviour live together in one function that's easy to preview and reuse.

How Compose works

• Composition: the first run of your composables builds a tree, the composition, describing the UI.
• State: values held in State objects (mutableStateOf, StateFlow collected as state) are observed. When they change, Compose schedules recomposition.
• Recomposition: Compose re-runs only the composables that read the changed state, and skips others whose parameters haven't changed.
• Phases: each frame goes through composition, layout and drawing. Deferring state reads to later phases avoids unnecessary work.

Core building blocks

Why learn Compose

Getting started

New Android Studio projects using the Empty Activity template include Compose. In an existing project, enable Compose and add the Compose BOM, which aligns the versions of all Compose libraries:

plugins {
    id("org.jetbrains.kotlin.plugin.compose")   // Compose compiler plugin (Kotlin 2.0+)
}
android {
    buildFeatures { compose = true }
}
dependencies {
    implementation(platform("androidx.compose:compose-bom:<latest>"))
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
    implementation("androidx.activity:activity-compose:<latest>")
}

Where Compose fits

Beginner mistakes

• Creating state without remember, so it resets on every recomposition.
• Running side effects (network, analytics) directly in the composable body.
• Expecting composables to run once or in a particular order. They may run often, in any order, and be skipped.
• Passing ViewModels deep into reusable components instead of plain state and lambdas.

Frequently asked questions

Conclusion

Jetpack Compose is Android's declarative UI toolkit: Kotlin functions describe UI for the current state, and targeted recomposition keeps the screen in sync. It's the recommended way to build Android UI today, and learning its state model is the key to using it well.

Next step: understand the unit of Compose UI in Composable Functions Explained.