A complete, step-by-step Jetpack Compose tutorial series. From your first Composable to building and publishing a real app. Every article has working code you can copy and run.
No complicated theory. Just simple explanations and real code.
Part 1: Foundations
Learn the building blocks of Jetpack Compose.
| # | Tutorial | What You Will Learn |
|---|---|---|
| 1 | What is Jetpack Compose and Why Should You Care? | What Compose is, Compose vs XML, project setup, first Composable, @Preview |
| 2 | Layouts — Column, Row, and Box Explained | Arranging elements, Arrangement, Alignment, weight, Spacer, practical examples |
| 3 | Modifiers — The Secret to Styling Everything | Size, padding, background, borders, click, scroll, modifier order |
| 4 | Text, Button, Image, TextField — Core Components | Styling text, button types, images, handling user input, login form |
| 5 | State — The Most Important Concept | remember, mutableStateOf, recomposition, rememberSaveable, state hoisting |
| 6 | Lists — LazyColumn and LazyRow | RecyclerView replacement, items, grid layouts, click listeners, performance |
| 7 | Material 3 Theming — Colors, Typography, and Dark Mode | Custom themes, color schemes, fonts, dark mode, dynamic colors |
Part 2: Intermediate
Build multi-screen apps with proper architecture.
| # | Tutorial | What You Will Learn |
|---|---|---|
| 8 | Navigation — Moving Between Screens | NavHost, NavController, passing arguments, bottom navigation, type-safe nav |
| 9 | ViewModel with Compose | StateFlow vs mutableStateOf, surviving config changes, connecting to UI |
| 10 | MVI — Keep Your App Simple and Clean | State, Intent, ViewModel pattern, one state per screen, common mistakes |
| 11 | Side Effects — LaunchedEffect and Friends | LaunchedEffect, DisposableEffect, rememberCoroutineScope, derivedStateOf |
| 12 | Retrofit — Loading Data from APIs | API calls, loading/error/success states, StateFlow, error handling |
| 13 | Room Database — Saving Data Locally | Entity, DAO, CRUD operations, observing with Flow, notes app example |
| 14 | Dependency Injection with Hilt | What DI is, @HiltViewModel, @Inject, connecting API + DB + ViewModel |
Part 3: Advanced
Build production-quality apps.
| # | Tutorial | What You Will Learn |
|---|---|---|
| 15 | Animations — Make Your UI Feel Alive | AnimatedVisibility, animateAsState, Crossfade, transitions |
| 16 | Custom Layouts and Canvas | Custom Layout composable, Canvas drawing, custom progress indicator |
| 17 | Performance — Making Your App Fast | Recomposition, stable types, remember, debugging tools |
| 18 | Testing Compose UI | createComposeRule, finding elements, actions, assertions |
| 19 | Permissions and Camera | Runtime permissions, CameraX Compose, handling denied states |
| 20 | Adaptive Layouts — Phones, Tablets, and Foldables | Window size classes, adaptive layouts, list-detail pattern |
Part 4: Build a Real App
Put everything together and build a complete task manager app.
| # | Tutorial | What You Will Learn |
|---|---|---|
| 21 | Planning the App — A Task Manager | App overview, features, project structure, setting up Hilt + Room + Nav |
| 22 | Building the Data Layer | Room entities, DAO, repository pattern, use cases |
| 23 | Building the UI Layer | Task list, add/edit screen, form validation, MVI, search and filter |
| 24 | Navigation, Animations, and Polish | Multi-screen nav, transitions, swipe-to-delete, empty states, dark mode |
| 25 | Publishing Your App — From Code to Google Play | Signed APK, Play Store listing, screenshots, upload and publish |
Who is This For?
- Beginners who know some Kotlin but never used Compose
- XML developers who want to switch to the modern way
- Intermediate developers who want to learn architecture patterns (MVI, clean architecture)
- Anyone who learns better by building real things instead of reading documentation
How to Use This Series
Start from Tutorial #1 and go in order. Each tutorial builds on the previous one. By the end, you will have built a complete app from scratch.
If you already know the basics, jump to Part 2 (Tutorial #8) for architecture and real-world patterns.