Jetpack Compose Tutorial

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. ...

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? ...

This is the most important tutorial in the entire series. If you don’t understand state, nothing in Compose will make sense. If you do understand it, everything clicks. State is the reason the login form from the previous tutorial worked. It is the reason buttons can toggle, text fields can update, and screens can change. Without state, your UI is frozen — it shows something once and never changes. Let’s fix that. ...