Repository pattern in Android Kotlin - Mini App: Build & Ship

Build: User List Screen

Shows a list of users fetched using a Repository pattern that abstracts data sources.

Target UI

-------------------------
| User List             |
|-----------------------|
| - Alice               |
| - Bob                 |
| - Charlie             |
|                       |
| [Refresh]             |
-------------------------

Create a User data class with id and name

Create a UserRepository interface with a function to get users

Implement a UserRepositoryImpl that returns a hardcoded list of users

Create a ViewModel that uses the repository to fetch users

Build a UserListScreen composable that shows the list of users

Add a Refresh button to reload the user list

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// TODO: Define User data class here

// TODO: Define UserRepository interface here

// TODO: Implement UserRepositoryImpl here

// TODO: Create UserViewModel here

@Composable
fun UserListScreen() {
    // TODO: Use ViewModel to get users and display list
    // TODO: Add Refresh button
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// Data class representing a User
data class User(val id: Int, val name: String)

// Repository interface to get users
interface UserRepository {
    fun getUsers(): List<User>
}

// Implementation of UserRepository returning hardcoded users
class UserRepositoryImpl : UserRepository {
    override fun getUsers(): List<User> {
        return listOf(
            User(1, "Alice"),
            User(2, "Bob"),
            User(3, "Charlie")
        )
    }
}

// ViewModel class to manage user data
class UserViewModel(private val repository: UserRepository) {
    var users by mutableStateOf<List<User>>(emptyList())
        private set

    fun loadUsers() {
        users = repository.getUsers()
    }
}

@Composable
fun UserListScreen() {
    val repository = remember { UserRepositoryImpl() }
    val viewModel = remember { UserViewModel(repository) }
    var users by remember { mutableStateOf(emptyList<User>()) }

    // Load users initially
    if (users.isEmpty()) {
        viewModel.loadUsers()
        users = viewModel.users
    }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("User List", style = MaterialTheme.typography.headlineMedium)

        LazyColumn(modifier = Modifier.weight(1f)) {
            items(users) { user ->
                Text(text = "- ${user.name}", modifier = Modifier.padding(vertical = 4.dp))
            }
        }

        Button(onClick = {
            viewModel.loadUsers()
            users = viewModel.users
        }) {
            Text("Refresh")
        }
    }
}

This solution uses the Repository pattern to separate data access from UI logic.

We define a User data class to hold user info.

The UserRepository interface declares a method to get users.

UserRepositoryImpl provides a hardcoded list of users.

UserViewModel holds the user list state and loads users from the repository.

The UserListScreen composable displays the users in a list and has a Refresh button to reload the data.

This keeps UI code clean and easy to maintain, following good app architecture.

Final Result

Completed Screen

-------------------------
| User List             |
|-----------------------|
| - Alice               |
| - Bob                 |
| - Charlie             |
|                       |
| [Refresh]             |
-------------------------

User sees a list of three users: Alice, Bob, Charlie

Tapping Refresh reloads the same user list from the repository

Stretch Goal

Add a loading indicator while users are being fetched

💡 Hint

Use a boolean state to track loading and show a Text or CircularProgressIndicator when true