Jetpack Compose Tutorial

Home Next

Jetpack Compose is Google's modern toolkit for building native Android UI — declaratively, in Kotlin, without writing a single line of XML. Instead of describing a layout once and then imperatively updating views by hand, you describe what the UI should look like for a given state, and Compose figures out what actually needs to redraw. This is the most comprehensive UI track on this site: 57 lessons covering everything from your first composable through Material 3 components, navigation, state management architecture, side effects, custom animations, and the performance details that separate a demo app from a production one. We build one running example throughout — RecipeBox, the same recipe-manager app used across our Android (Java), Android (Kotlin), and Testing tracks — so if you've been through any of those, the screens here will feel familiar even though every line of UI code is completely different.

Where this fits: This track assumes you're comfortable with Kotlin basics (covered in Android (Kotlin)) but does NOT require you to have built a traditional View-based Android app first — Compose is different enough that we build every UI concept from scratch here.

Why Compose Instead of XML Layouts

Traditional Views (XML)	Jetpack Compose
Layout described in XML, logic in Kotlin — two files per screen, kept in sync manually	Layout AND logic in one Kotlin file — a composable function
You manually update views when data changes (`findViewById`, `.text = `)	You describe the UI for the CURRENT state; Compose re-renders automatically when state changes
Custom views require extending View/ViewGroup classes	Custom UI is usually just a function that calls other composables
Previewing a layout means running the app	`@Preview` renders a composable directly in Android Studio, no emulator needed

A Quick Look Ahead

Example: A Simple RecipeBox Recipe Card

@Composable
fun RecipeCard(title: String, prepMinutes: Int) {
    Card(modifier = Modifier.padding(8.dp)) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Text(text = "$prepMinutes min", style = MaterialTheme.typography.bodySmall)
        }
    }
}

Note: This is correct, real Compose/Kotlin code — but this website's own project doesn't run a live Android Studio build, so you won't see it actually render on this page. Follow along by creating your own project after the next couple of setup lessons.

What You'll Learn In This Track

Area	Covered in
Foundations	Why Compose, setup, first composable, previews, state basics, recomposition
Core UI	Modifiers, Column/Row/Box, text, images, buttons, TextField, state hoisting
Lists & navigation	LazyColumn/LazyRow, LazyVerticalGrid, Navigation Compose, arguments, bottom nav, nested graphs
UI components	Scaffold, dialogs, snackbar, bottom sheet, cards, selection controls, sliders/chips, custom shapes
Theming	MaterialTheme, typography, dark mode, dynamic color (Material You)
State & architecture	ViewModel, unidirectional data flow, StateFlow/collectAsState, MVVM, derivedStateOf
Side effects	LaunchedEffect, DisposableEffect, SideEffect/produceState, rememberCoroutineScope
Animations	animate*AsState, AnimatedVisibility, Crossfade/AnimatedContent, Transition API, gestures
Advanced composition	Custom layouts, CompositionLocal, slot APIs, custom modifiers
Data, testing & performance	Room, Retrofit patterns, Paging 3, UI testing, performance/stability, View interop

Next steps: Head to What is Jetpack Compose? to understand the declarative mental shift before we write any code.

Home Next