Introduction to Jetpack Compose

Jetpack Compose is Android's modern UI toolkit. Instead of describing layouts in XML and updating views manually, you describe what the UI should look like for the current state.

This is called declarative UI.

Old Mental Model

In the older View system, you often find a view and mutate it.

Copy codetextView.text = user.name
progressBar.visibility = View.GONE

This works, but large screens can become hard to keep in sync.

Compose Mental Model

In Compose, state goes in, UI comes out.

Copy code@Composable
fun Profile(name: String, isLoading: Boolean) {
    if (isLoading) {
        CircularProgressIndicator()
    } else {
        Text("Welcome, $name")
    }
}

When the state changes, Compose recomposes the affected UI.

Composable Functions

A composable function should be small and focused.

Copy code@Composable
fun CourseCard(title: String, lessons: Int) {
    Column {
        Text(title)
        Text("$lessons lessons")
    }
}

You can compose bigger screens from smaller functions.

Copy code@Composable
fun HomeScreen() {
    Column {
        CourseCard("Kotlin Basics", 6)
        CourseCard("Compose UI", 6)
    }
}

State And Events

Compose screens usually follow this pattern:

• state describes what is shown
• events describe what the user did
• business logic updates the state

Copy codeButton(onClick = { println("Clicked") }) {
    Text("Continue")
}

The UI should not hide complex business logic inside composables. Keep composables mostly about displaying state and sending events.

Practice

Create three composables: Header, LessonCard, and HomeScreen. Pass text values as parameters instead of hardcoding everything.

Summary

Compose is declarative. You write composable functions that describe UI for a given state. This makes Android UI more predictable, testable, and Kotlin-friendly.