Jetpack-Compose

Your app works. But it feels flat. Buttons appear instantly. Screens switch without transition. Content pops in and out like a slideshow from 2005. Animations fix that. They make your app feel smooth, polished, and alive — like a well-made product instead of a homework assignment. The good news: Compose makes animations surprisingly easy. You can add most animations with a single line of code. The Animation API at a Glance Compose has several animation APIs, each for a different use case: ...

In the previous tutorials, we created databases and ViewModels manually. We wrote DatabaseProvider singletons. We passed dependencies by hand. It worked — but it doesn’t scale. When your app has 10 ViewModels, 5 repositories, 3 data sources, and a database — wiring everything manually becomes a nightmare. One missing connection and your app crashes. Hilt fixes this. You add annotations to your classes, and Hilt connects everything automatically. What is Dependency Injection? Dependency injection (DI) means: instead of a class creating its own dependencies, someone else provides them. ...

Your app loads data from an API. But what happens when the user has no internet? The screen goes blank. Room database fixes this. It saves data on the device so your app works offline. And it integrates perfectly with Compose — when data changes in the database, the UI updates automatically. What is Room? Room is Google’s database library for Android. It sits on top of SQLite and gives you a clean Kotlin API instead of raw SQL. ...

Every real app needs data from the internet. A weather app calls a weather API. A social app loads posts from a server. A store app fetches products from a backend. Retrofit is the most popular library for making HTTP requests in Android. In this tutorial, you will learn how to use it with Compose to build a screen that loads, displays, and handles errors from a real API. What is Retrofit? Retrofit is an HTTP client library by Square. It turns your API into a Kotlin interface: ...

Compose has one rule: Composable functions should be pure. They take state in and produce UI out. No database calls. No API requests. No timers. No logging. But real apps need those things. You need to start a timer when a screen opens. You need to load data when an ID changes. You need to clean up a listener when a screen closes. That is what side effects are for. They let you safely run “impure” code inside Compose. ...

In Tutorial #5, we learned about remember and mutableStateOf. They work great for simple state. But they have a big problem — when your app needs to load data from a database or API, where does that logic go? Not in the Composable. Composables are for UI, not business logic. That is what ViewModel is for. What is ViewModel? ViewModel is a class that holds your screen’s data and logic. It survives things that destroy and recreate your Composable — like screen rotation or system theme changes. ...

Welcome to Part 2 of the series. You can now build beautiful single-screen apps. But real apps have many screens — a home screen, a detail screen, a settings screen, a profile screen. Navigation is how you move between them. In this tutorial, you will learn everything about Compose navigation: Setting up navigation Creating screens and routes Type-safe navigation with Kotlin Serialization Passing data between screens Bottom navigation bar Nested navigation graphs Back stack management Best practices This is a long tutorial. Take your time. ...

Your app works. But it looks like every other default Compose app — same purple, same fonts, same everything. Theming is how you make your app look like YOUR app. Custom colors, custom fonts, dark mode support — all in one system that applies everywhere automatically. Material 3 (also called Material You) is the design system Google built for modern Android apps. Compose uses it by default. In this tutorial, you will learn how to customize it. ...

Bookmark this page. Use Ctrl+F (or Cmd+F on Mac) to find what you need. This cheat sheet covers Jetpack Compose components, modifiers, state, navigation, and common patterns. Last updated: April 2026 Core Composables Composable Usage Text("Hello") Display text Text("Bold", fontWeight = FontWeight.Bold) Styled text Button(onClick = { }) { Text("Click") } Clickable button OutlinedButton(onClick = { }) { Text("Outlined") } Outlined variant TextButton(onClick = { }) { Text("Text") } Text-only button IconButton(onClick = { }) { Icon(...) } Icon button TextField(value, onValueChange = { }) Text input field OutlinedTextField(value, onValueChange = { }) Outlined text input Image(painter, contentDescription) Display an image Icon(Icons.Default.Home, contentDescription) Material icon Checkbox(checked, onCheckedChange) Checkbox Switch(checked, onCheckedChange) Toggle switch RadioButton(selected, onClick) Radio button Slider(value, onValueChange) Slider CircularProgressIndicator() Loading spinner LinearProgressIndicator(progress) Progress bar HorizontalDivider() Horizontal divider line (replaces deprecated Divider()) Spacer(modifier = Modifier.height(16.dp)) Empty space Layouts // Column — vertical stack Column { Text("First") Text("Second") } // Row — horizontal stack Row { Text("Left") Spacer(Modifier.weight(1f)) Text("Right") } // Box — stack on top of each other Box { Image(...) // background Text("Overlay") // on top } // LazyColumn — scrollable vertical list (RecyclerView replacement) LazyColumn { items(list) { item -> Text(item.name) } } // LazyRow — scrollable horizontal list LazyRow { items(list) { item -> Card { Text(item.name) } } } // LazyVerticalGrid — grid layout LazyVerticalGrid(columns = GridCells.Fixed(2)) { items(list) { item -> Card { Text(item.name) } } } Common Modifiers Modifiers change the appearance and behavior of composables. Order matters — modifiers are applied top to bottom. ...

Every app has lists. A chat app has a list of messages. A store app has a list of products. A settings app has a list of options. In the old Android world, you used RecyclerView — which needed an Adapter, a ViewHolder, a LayoutManager, and a lot of boilerplate code. In Compose, you just use LazyColumn. That’s it. LazyColumn vs Column — Why Not Just Use Column? You already know Column from Tutorial #2. Why not use it for lists? ...