Android Compose: Building a Modern App with MVVM, Navigation, and Retrofit

Compose series

Part 1: Compose Basics (WIP)

Part 2: Android Compose: App Navigation

Part 3: Android Compose: App Navigation how to Pass Data Between Screens

Part 4: Android Compose: Building a Simple Image Loading App with MVVM

Part 5: Android Compose: Building a Modern Android App with MVVM, Navigation, and Retrofit

In this tutorial, we’ll build a modern Android application that demonstrates best practices in Android development. We’ll create a search interface that connects to an API, displays results in a list, and shows detailed information about selected items. We’ll use the Star Wars API (SWAPI) as our data source https://swapi.tech/api/.

Home page

Details page

What We’ll Cover

-Setting up the project architecture using MVVM
- Implementing API calls with Retrofit
- Building a responsive UI with Jetpack Compose
- Managing navigation between screens
- Handling state and data flow

Prerequisites:
- Basic knowledge of Kotlin
- Android Studio installed
- Understanding of coroutines and flows
- Familiarity with Jetpack Compose basics

Project Architecture Overview

Our app will follow the MVVM (Model-View-ViewModel) architecture pattern, which helps separate concerns and make our code more maintainable and testable.

Project Structure

app/
├── data/
│   ├── model/
│   │   ├── ApiResponse.kt
│   │   ├── PersonResult.kt
│   │   └── Properties.kt
│   └── network/
│       └── PeopleService.kt
├── ui/
│   ├── screens/
│   │   ├── SearchScreen.kt
│   │   └── DetailsScreen.kt
│   └── navigation/
│       └── AppNavigation.kt
└── viewmodel/
    └── PersonViewModel.kt

Step 1: Setting Up the Data…