Jetpack Compose Architecture Best Practices: Building Scalable UI#

Introduction#

Jetpack Compose revolutionizes Android UI development with its declarative approach, but with great power comes the need for proper architectural patterns. This comprehensive guide explores best practices for building scalable, maintainable, and performant Compose applications based on Google’s official recommendations and real-world implementations.

Compose Architecture Fundamentals#

Declarative UI Principles#

1
graph TB
2
    subgraph "Compose Architecture"
3
        STATE[App State] --> UI[UI Composition]
4
        EVENT[User Events] --> STATE
5

6
        subgraph "State Flow"
7
            STATE --> RECOMP[Recomposition]
8
            RECOMP --> UI
9
        end
10

11
        subgraph "Data Flow"
12
            UI --> EVENT
13
            EVENT --> VIEWMODEL[ViewModel]
14
            VIEWMODEL --> REPO[Repository]
15
            REPO --> STATE
16
        end
17

18
        subgraph "Composition"
19
            UI --> COMPOSABLES[Composable Functions]
20
            COMPOSABLES --> ELEMENTS[UI Elements]
21
        end
22
    end

Core Principles#

State Flows Down: Data flows down the composition hierarchy
Events Flow Up: User interactions bubble up as events
Single Source of Truth: Each piece of state has one authoritative source
Unidirectional Data Flow: Data flows in one direction for predictability

State Management Architecture#

State Categories#

1
// StateTypes.kt - Different types of state in Compose
2
sealed class ComposeState {
3
    // UI state that survives recomposition but not process death
4
    data class RememberState<T>(val value: T)
5

6
    // State that survives process death
7
    data class SavedInstanceState<T>(val value: T)
8

9
    // State that persists across app sessions
10
    data class PersistentState<T>(val value: T)
11

12
    // Derived state computed from other state
13
    data class DerivedState<T>(val computation: () -> T)
14
}
15

16
// Example implementations
17
@Composable
18
fun StateExamples() {
19
    // Remember state - survives recomposition
20
    var counter by remember { mutableIntStateOf(0) }
21

22
    // Saved instance state - survives process death
23
    var text by rememberSaveable { mutableStateOf("") }
24

25
    // Derived state - computed from other state
26
    val isCounterEven by remember { derivedStateOf { counter % 2 == 0 } }
27

28
    // State from ViewModel - business logic state
29
    val viewModel: MyViewModel = hiltViewModel()
30
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
31
}

ViewModel State Management#

1
// TasksUiState.kt - Comprehensive UI State Management
2
@Immutable
3
data class TasksUiState(
4
    val tasks: List<Task> = emptyList(),
5
    val isLoading: Boolean = false,
6
    val errorMessage: String? = null,
7
    val searchQuery: String = "",
8
    val selectedFilter: TaskFilter = TaskFilter.ALL,
9
    val selectedTasks: Set<String> = emptySet(),
10
    val isMultiSelectMode: Boolean = false
11
) {
12
    val filteredTasks: List<Task>
13
        get() = tasks.filter { task ->
14
            val matchesFilter = when (selectedFilter) {
15
                TaskFilter.ALL -> true
16
                TaskFilter.ACTIVE -> !task.isCompleted
17
                TaskFilter.COMPLETED -> task.isCompleted
18
                TaskFilter.OVERDUE -> task.isOverdue
19
            }
20

21
            val matchesSearch = searchQuery.isEmpty() ||
22
                task.title.contains(searchQuery, ignoreCase = true) ||
23
                task.description.contains(searchQuery, ignoreCase = true)
24

25
            matchesFilter && matchesSearch
26
        }
27

28
    val hasSelectedTasks: Boolean
29
        get() = selectedTasks.isNotEmpty()
30

31
    val selectedTasksCount: Int
32
        get() = selectedTasks.size
33
}
34

35
// UI Events - Sealed class for type-safe event handling
36
sealed interface TasksUiEvent {
37
    data object LoadTasks : TasksUiEvent
38
    data object RefreshTasks : TasksUiEvent
39
    data class SearchTasks(val query: String) : TasksUiEvent
40
    data class FilterTasks(val filter: TaskFilter) : TasksUiEvent
41
    data class SelectTask(val taskId: String) : TasksUiEvent
42
    data class ToggleTaskCompletion(val taskId: String) : TasksUiEvent
43
    data class DeleteTasks(val taskIds: Set<String>) : TasksUiEvent
44
    data object ClearSelection : TasksUiEvent
45
    data object EnterMultiSelectMode : TasksUiEvent
46
    data object ExitMultiSelectMode : TasksUiEvent
47
    data object DismissError : TasksUiEvent
48
}

Advanced ViewModel Implementation#

1
// TasksViewModel.kt - Production-ready ViewModel
2
@HiltViewModel
3
class TasksViewModel @Inject constructor(
4
    private val tasksRepository: TasksRepository,
5
    private val preferencesRepository: PreferencesRepository,
6
    private val analyticsTracker: AnalyticsTracker,
7
    @IoDispatcher private val ioDispatcher: CoroutineDispatcher,
8
    savedStateHandle: SavedStateHandle
9
) : ViewModel() {
10

11
    // Private mutable state
12
    private val _uiState = MutableStateFlow(TasksUiState(isLoading = true))
13

14
    // Public immutable state
15
    val uiState: StateFlow<TasksUiState> = _uiState
16
        .stateIn(
17
            scope = viewModelScope,
18
            started = SharingStarted.WhileSubscribed(5_000),
19
            initialValue = TasksUiState(isLoading = true)
20
        )
21

22
    // Navigation events - single-shot events
23
    private val _navigationEvent = Channel<TasksNavigationEvent>(Channel.BUFFERED)
24
    val navigationEvent = _navigationEvent.receiveAsFlow()
25

26
    // Snackbar messages - single-shot events
27
    private val _snackbarMessage = Channel<String>(Channel.BUFFERED)
28
    val snackbarMessage = _snackbarMessage.receiveAsFlow()
29

30
    // Search query with debouncing
31
    private val searchQuery = MutableStateFlow("")
32

33
    init {
34
        initializeState()
35
        observeSearchQuery()
36
        loadInitialData()
37
    }
38

39
    private fun initializeState() {
40
        // Restore saved state if available
41
        val savedFilter = savedStateHandle.get<String>("selected_filter")?.let {
42
            TaskFilter.valueOf(it)
43
        } ?: TaskFilter.ALL
44

45
        _uiState.update { it.copy(selectedFilter = savedFilter) }
46

47
        // Save state on changes
48
        viewModelScope.launch {
49
            uiState.map { it.selectedFilter.name }.collect { filter ->
50
                savedStateHandle["selected_filter"] = filter
51
            }
52
        }
53
    }
54

55
    private fun observeSearchQuery() {
56
        viewModelScope.launch {
57
            searchQuery
58
                .debounce(300) // Debounce search input
59
                .distinctUntilChanged()
60
                .collect { query ->
61
                    _uiState.update { it.copy(searchQuery = query) }
62
                    analyticsTracker.trackEvent("search_tasks", mapOf("query_length" to query.length))
63
                }
64
        }
65
    }
66

67
    private fun loadInitialData() {
68
        viewModelScope.launch {
69
            try {
70
                // Combine multiple data sources
71
                combine(
72
                    tasksRepository.getAllTasks(),
73
                    preferencesRepository.getUserPreferences()
74
                ) { tasks, preferences ->
75
                    tasks to preferences
76
                }.catch { throwable ->
77
                    handleError(throwable)
78
                }.collect { (tasks, preferences) ->
79
                    _uiState.update { currentState ->
80
                        currentState.copy(
81
                            tasks = tasks,
82
                            isLoading = false,
83
                            errorMessage = null,
84
                            selectedFilter = preferences.defaultFilter
85
                        )
86
                    }
87
                }
88
            } catch (e: Exception) {
89
                handleError(e)
90
            }
91
        }
92
    }
93

94
    fun handleEvent(event: TasksUiEvent) {
95
        when (event) {
96
            is TasksUiEvent.LoadTasks -> loadTasks()
97
            is TasksUiEvent.RefreshTasks -> refreshTasks()
98
            is TasksUiEvent.SearchTasks -> updateSearchQuery(event.query)
99
            is TasksUiEvent.FilterTasks -> updateFilter(event.filter)
100
            is TasksUiEvent.SelectTask -> toggleTaskSelection(event.taskId)
101
            is TasksUiEvent.ToggleTaskCompletion -> toggleTaskCompletion(event.taskId)
102
            is TasksUiEvent.DeleteTasks -> deleteTasks(event.taskIds)
103
            is TasksUiEvent.ClearSelection -> clearSelection()
104
            is TasksUiEvent.EnterMultiSelectMode -> enterMultiSelectMode()
105
            is TasksUiEvent.ExitMultiSelectMode -> exitMultiSelectMode()
106
            is TasksUiEvent.DismissError -> dismissError()
107
        }
108
    }
109

110
    private fun updateSearchQuery(query: String) {
111
        searchQuery.value = query
112
    }
113

114
    private fun updateFilter(filter: TaskFilter) {
115
        _uiState.update { it.copy(selectedFilter = filter) }
116

117
        // Save preference
118
        viewModelScope.launch(ioDispatcher) {
119
            preferencesRepository.updateDefaultFilter(filter)
120
        }
121

122
        analyticsTracker.trackEvent("filter_tasks", mapOf("filter" to filter.name))
123
    }
124

125
    private fun toggleTaskSelection(taskId: String) {
126
        _uiState.update { currentState ->
127
            val newSelection = if (taskId in currentState.selectedTasks) {
128
                currentState.selectedTasks - taskId
129
            } else {
130
                currentState.selectedTasks + taskId
131
            }
132

133
            currentState.copy(
134
                selectedTasks = newSelection,
135
                isMultiSelectMode = newSelection.isNotEmpty()
136
            )
137
        }
138
    }
139

140
    private fun toggleTaskCompletion(taskId: String) {
141
        viewModelScope.launch(ioDispatcher) {
142
            try {
143
                val currentState = _uiState.value
144
                val task = currentState.tasks.find { it.id == taskId } ?: return@launch
145

146
                if (task.isCompleted) {
147
                    tasksRepository.activateTask(taskId)
148
                    showSnackbar("Task marked as active")
149
                } else {
150
                    tasksRepository.completeTask(taskId)
151
                    showSnackbar("Task completed")
152
                }
153

154
                analyticsTracker.trackEvent("toggle_task_completion", mapOf(
155
                    "task_id" to taskId,
156
                    "completed" to !task.isCompleted
157
                ))
158
            } catch (e: Exception) {
159
                handleError(e)
160
            }
161
        }
162
    }
163

164
    private fun deleteTasks(taskIds: Set<String>) {
165
        viewModelScope.launch(ioDispatcher) {
166
            try {
167
                tasksRepository.deleteTasks(taskIds.toList())
168
                _uiState.update { it.copy(selectedTasks = emptySet(), isMultiSelectMode = false) }
169

170
                val message = if (taskIds.size == 1) {
171
                    "Task deleted"
172
                } else {
173
                    "${taskIds.size} tasks deleted"
174
                }
175
                showSnackbar(message)
176

177
                analyticsTracker.trackEvent("delete_tasks", mapOf("count" to taskIds.size))
178
            } catch (e: Exception) {
179
                handleError(e)
180
            }
181
        }
182
    }
183

184
    private fun handleError(throwable: Throwable) {
185
        val errorMessage = when (throwable) {
186
            is IOException -> "Network error. Please check your connection."
187
            is HttpException -> "Server error. Please try again later."
188
            else -> "An unexpected error occurred."
189
        }
190

191
        _uiState.update {
192
            it.copy(
193
                isLoading = false,
194
                errorMessage = errorMessage
195
            )
196
        }
197

198
        analyticsTracker.trackError("tasks_error", throwable)
199
    }
200

201
    private suspend fun showSnackbar(message: String) {
202
        _snackbarMessage.send(message)
203
    }
204

205
    private fun dismissError() {
206
        _uiState.update { it.copy(errorMessage = null) }
207
    }
208

209
    // Additional helper methods...
210
}

Composable Architecture Patterns#

Screen-Level Composables#

1
// TasksScreen.kt - Screen-level Composable
2
@OptIn(ExperimentalMaterial3Api::class)
3
@Composable
4
fun TasksScreen(
5
    onNavigateToAddTask: () -> Unit,
6
    onNavigateToTaskDetail: (String) -> Unit,
7
    modifier: Modifier = Modifier,
8
    viewModel: TasksViewModel = hiltViewModel()
9
) {
10
    // Collect state
11
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
12

13
    // Handle navigation events
14
    LaunchedEffect(viewModel) {
15
        viewModel.navigationEvent.collect { event ->
16
            when (event) {
17
                is TasksNavigationEvent.NavigateToDetail ->
18
                    onNavigateToTaskDetail(event.taskId)
19
                is TasksNavigationEvent.NavigateToAdd ->
20
                    onNavigateToAddTask()
21
            }
22
        }
23
    }
24

25
    // Handle snackbar messages
26
    val snackbarHostState = remember { SnackbarHostState() }
27
    LaunchedEffect(viewModel) {
28
        viewModel.snackbarMessage.collect { message ->
29
            snackbarHostState.showSnackbar(message)
30
        }
31
    }
32

33
    // Handle system back press in multi-select mode
34
    BackHandler(enabled = uiState.isMultiSelectMode) {
35
        viewModel.handleEvent(TasksUiEvent.ExitMultiSelectMode)
36
    }
37

38
    Scaffold(
39
        topBar = {
40
            TasksTopBar(
41
                title = "Tasks",
42
                isMultiSelectMode = uiState.isMultiSelectMode,
43
                selectedCount = uiState.selectedTasksCount,
44
                onExitMultiSelect = {
45
                    viewModel.handleEvent(TasksUiEvent.ExitMultiSelectMode)
46
                },
47
                onDeleteSelected = {
48
                    viewModel.handleEvent(TasksUiEvent.DeleteTasks(uiState.selectedTasks))
49
                }
50
            )
51
        },
52
        floatingActionButton = {
53
            if (!uiState.isMultiSelectMode) {
54
                FloatingActionButton(
55
                    onClick = onNavigateToAddTask,
56
                    modifier = Modifier.testTag("fab_add_task")
57
                ) {
58
                    Icon(Icons.Default.Add, contentDescription = "Add task")
59
                }
60
            }
61
        },
62
        snackbarHost = { SnackbarHost(snackbarHostState) },
63
        modifier = modifier
64
    ) { paddingValues ->
65
        TasksContent(
66
            uiState = uiState,
67
            onEvent = viewModel::handleEvent,
68
            onTaskClick = { taskId ->
69
                if (uiState.isMultiSelectMode) {
70
                    viewModel.handleEvent(TasksUiEvent.SelectTask(taskId))
71
                } else {
72
                    onNavigateToTaskDetail(taskId)
73
                }
74
            },
75
            onTaskLongClick = { taskId ->
76
                if (!uiState.isMultiSelectMode) {
77
                    viewModel.handleEvent(TasksUiEvent.EnterMultiSelectMode)
78
                    viewModel.handleEvent(TasksUiEvent.SelectTask(taskId))
79
                }
80
            },
81
            modifier = Modifier
82
                .fillMaxSize()
83
                .padding(paddingValues)
84
        )
85
    }
86
}

Content Composables#

1
// TasksContent.kt - Content-level Composable
2
@Composable
3
internal fun TasksContent(
4
    uiState: TasksUiState,
5
    onEvent: (TasksUiEvent) -> Unit,
6
    onTaskClick: (String) -> Unit,
7
    onTaskLongClick: (String) -> Unit,
8
    modifier: Modifier = Modifier
9
) {
10
    Column(modifier = modifier) {
11
        // Search and Filter Section
12
        TasksSearchAndFilter(
13
            searchQuery = uiState.searchQuery,
14
            selectedFilter = uiState.selectedFilter,
15
            onSearchQueryChange = { query ->
16
                onEvent(TasksUiEvent.SearchTasks(query))
17
            },
18
            onFilterChange = { filter ->
19
                onEvent(TasksUiEvent.FilterTasks(filter))
20
            },
21
            modifier = Modifier
22
                .fillMaxWidth()
23
                .padding(16.dp)
24
        )
25

26
        // Tasks List
27
        Box(modifier = Modifier.weight(1f)) {
28
            when {
29
                uiState.isLoading -> {
30
                    TasksLoadingContent(
31
                        modifier = Modifier.fillMaxSize()
32
                    )
33
                }
34

35
                uiState.errorMessage != null -> {
36
                    TasksErrorContent(
37
                        message = uiState.errorMessage,
38
                        onRetry = { onEvent(TasksUiEvent.LoadTasks) },
39
                        onDismiss = { onEvent(TasksUiEvent.DismissError) },
40
                        modifier = Modifier.fillMaxSize()
41
                    )
42
                }
43

44
                uiState.filteredTasks.isEmpty() -> {
45
                    TasksEmptyContent(
46
                        filter = uiState.selectedFilter,
47
                        searchQuery = uiState.searchQuery,
48
                        modifier = Modifier.fillMaxSize()
49
                    )
50
                }
51

52
                else -> {
53
                    TasksList(
54
                        tasks = uiState.filteredTasks,
55
                        selectedTasks = uiState.selectedTasks,
56
                        isMultiSelectMode = uiState.isMultiSelectMode,
57
                        onTaskClick = onTaskClick,
58
                        onTaskLongClick = onTaskLongClick,
59
                        onTaskToggle = { taskId ->
60
                            onEvent(TasksUiEvent.ToggleTaskCompletion(taskId))
61
                        },
62
                        modifier = Modifier.fillMaxSize()
63
                    )
64
                }
65
            }
66
        }
67
    }
68
}

Reusable UI Components#

1
// TaskItem.kt - Reusable Task Item Component
2
@OptIn(ExperimentalFoundationApi::class)
3
@Composable
4
fun TaskItem(
5
    task: Task,
6
    isSelected: Boolean,
7
    isMultiSelectMode: Boolean,
8
    onTaskClick: () -> Unit,
9
    onTaskLongClick: () -> Unit,
10
    onTaskToggle: () -> Unit,
11
    modifier: Modifier = Modifier
12
) {
13
    // Animation values
14
    val elevation by animateDpAsState(
15
        targetValue = if (isSelected) 8.dp else 2.dp,
16
        label = "card_elevation"
17
    )
18

19
    val backgroundColor by animateColorAsState(
20
        targetValue = if (isSelected) {
21
            MaterialTheme.colorScheme.primaryContainer
22
        } else {
23
            MaterialTheme.colorScheme.surface
24
        },
25
        label = "background_color"
26
    )
27

28
    Card(
29
        onClick = onTaskClick,
30
        modifier = modifier
31
            .fillMaxWidth()
32
            .padding(horizontal = 16.dp, vertical = 4.dp)
33
            .combinedClickable(
34
                onClick = onTaskClick,
35
                onLongClick = onTaskLongClick
36
            )
37
            .testTag("task_item_${task.id}"),
38
        colors = CardDefaults.cardColors(containerColor = backgroundColor),
39
        elevation = CardDefaults.cardElevation(defaultElevation = elevation)
40
    ) {
41
        Row(
42
            modifier = Modifier
43
                .fillMaxWidth()
44
                .padding(16.dp),
45
            verticalAlignment = Alignment.CenterVertically
46
        ) {
47
            // Multi-select indicator or completion checkbox
48
            if (isMultiSelectMode) {
49
                Checkbox(
50
                    checked = isSelected,
51
                    onCheckedChange = { onTaskClick() },
52
                    modifier = Modifier.padding(end = 12.dp)
53
                )
54
            } else {
55
                Checkbox(
56
                    checked = task.isCompleted,
57
                    onCheckedChange = { onTaskToggle() },
58
                    modifier = Modifier.padding(end = 12.dp)
59
                )
60
            }
61

62
            // Priority indicator
63
            TaskPriorityIndicator(
64
                priority = task.priority,
65
                modifier = Modifier.padding(end = 8.dp)
66
            )
67

68
            // Task content
69
            Column(
70
                modifier = Modifier.weight(1f)
71
            ) {
72
                Text(
73
                    text = task.title,
74
                    style = MaterialTheme.typography.bodyLarge,
75
                    textDecoration = if (task.isCompleted) {
76
                        TextDecoration.LineThrough
77
                    } else {
78
                        TextDecoration.None
79
                    },
80
                    color = if (task.isCompleted) {
81
                        MaterialTheme.colorScheme.onSurfaceVariant
82
                    } else {
83
                        MaterialTheme.colorScheme.onSurface
84
                    }
85
                )
86

87
                if (task.description.isNotEmpty()) {
88
                    Text(
89
                        text = task.description,
90
                        style = MaterialTheme.typography.bodyMedium,
91
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
92
                        maxLines = 2,
93
                        overflow = TextOverflow.Ellipsis,
94
                        modifier = Modifier.padding(top = 4.dp)
95
                    )
96
                }
97

98
                // Due date indicator
99
                task.dueDate?.let { dueDate ->
100
                    TaskDueDateChip(
101
                        dueDate = dueDate,
102
                        isCompleted = task.isCompleted,
103
                        modifier = Modifier.padding(top = 8.dp)
104
                    )
105
                }
106
            }
107

108
            // Task status indicator
109
            TaskStatusIndicator(
110
                task = task,
111
                modifier = Modifier.padding(start = 8.dp)
112
            )
113
        }
114
    }
115
}
116

117
@Composable
118
private fun TaskPriorityIndicator(
119
    priority: TaskPriority,
120
    modifier: Modifier = Modifier
121
) {
122
    val color = when (priority) {
123
        TaskPriority.LOW -> MaterialTheme.colorScheme.outline
124
        TaskPriority.NORMAL -> MaterialTheme.colorScheme.primary
125
        TaskPriority.HIGH -> MaterialTheme.colorScheme.error
126
        TaskPriority.URGENT -> MaterialTheme.colorScheme.error
127
    }
128

129
    Box(
130
        modifier = modifier
131
            .size(12.dp)
132
            .background(
133
                color = color,
134
                shape = CircleShape
135
            )
136
    )
137
}
138

139
@Composable
140
private fun TaskDueDateChip(
141
    dueDate: LocalDateTime,
142
    isCompleted: Boolean,
143
    modifier: Modifier = Modifier
144
) {
145
    val now = LocalDateTime.now()
146
    val isOverdue = dueDate.isBefore(now) && !isCompleted
147

148
    val chipColor = when {
149
        isCompleted -> MaterialTheme.colorScheme.outline
150
        isOverdue -> MaterialTheme.colorScheme.error
151
        dueDate.isBefore(now.plusDays(1)) -> MaterialTheme.colorScheme.tertiary
152
        else -> MaterialTheme.colorScheme.outline
153
    }
154

155
    val text = when {
156
        isCompleted -> "Completed"
157
        isOverdue -> "Overdue"
158
        dueDate.toLocalDate() == now.toLocalDate() -> "Due Today"
159
        dueDate.toLocalDate() == now.toLocalDate().plusDays(1) -> "Due Tomorrow"
160
        else -> "Due ${dueDate.format(DateTimeFormatter.ofPattern("MMM dd"))}"
161
    }
162

163
    Surface(
164
        modifier = modifier,
165
        shape = RoundedCornerShape(12.dp),
166
        color = chipColor.copy(alpha = 0.1f),
167
        border = BorderStroke(1.dp, chipColor.copy(alpha = 0.3f))
168
    ) {
169
        Text(
170
            text = text,
171
            style = MaterialTheme.typography.labelSmall,
172
            color = chipColor,
173
            modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
174
        )
175
    }
176
}

1
// NavigationGraph.kt - Type-safe Navigation with Compose
2
@Serializable
3
object TasksRoute
4

5
@Serializable
6
data class TaskDetailRoute(val taskId: String)
7

8
@Serializable
9
object AddTaskRoute
10

11
@Composable
12
fun TasksNavigationGraph(
13
    navController: NavHostController,
14
    modifier: Modifier = Modifier
15
) {
16
    NavHost(
17
        navController = navController,
18
        startDestination = TasksRoute,
19
        modifier = modifier
20
    ) {
21
        composable<TasksRoute> {
22
            TasksScreen(
23
                onNavigateToAddTask = {
24
                    navController.navigate(AddTaskRoute)
25
                },
26
                onNavigateToTaskDetail = { taskId ->
27
                    navController.navigate(TaskDetailRoute(taskId))
28
                }
29
            )
30
        }
31

32
        composable<TaskDetailRoute> { backStackEntry ->
33
            val args = backStackEntry.toRoute<TaskDetailRoute>()
34
            TaskDetailScreen(
35
                taskId = args.taskId,
36
                onNavigateBack = {
37
                    navController.popBackStack()
38
                }
39
            )
40
        }
41

42
        composable<AddTaskRoute> {
43
            AddTaskScreen(
44
                onNavigateBack = {
45
                    navController.popBackStack()
46
                },
47
                onTaskSaved = { taskId ->
48
                    navController.navigate(TaskDetailRoute(taskId)) {
49
                        popUpTo<AddTaskRoute> { inclusive = true }
50
                    }
51
                }
52
            )
53
        }
54
    }
55
}

1
// NavigationViewModel.kt - Centralized Navigation State
2
@HiltViewModel
3
class NavigationViewModel @Inject constructor() : ViewModel() {
4

5
    private val _navigationEvent = Channel<NavigationEvent>(Channel.BUFFERED)
6
    val navigationEvent = _navigationEvent.receiveAsFlow()
7

8
    fun navigateToTaskDetail(taskId: String) {
9
        viewModelScope.launch {
10
            _navigationEvent.send(NavigationEvent.NavigateToTaskDetail(taskId))
11
        }
12
    }
13

14
    fun navigateToAddTask() {
15
        viewModelScope.launch {
16
            _navigationEvent.send(NavigationEvent.NavigateToAddTask)
17
        }
18
    }
19

20
    fun navigateBack() {
21
        viewModelScope.launch {
22
            _navigationEvent.send(NavigationEvent.NavigateBack)
23
        }
24
    }
25
}
26

27
sealed interface NavigationEvent {
28
    data class NavigateToTaskDetail(val taskId: String) : NavigationEvent
29
    data object NavigateToAddTask : NavigationEvent
30
    data object NavigateBack : NavigationEvent
31
}

Performance Optimization#

Recomposition Optimization#

1
// PerformanceOptimizedComposables.kt - Optimized Composables
2
@Composable
3
fun OptimizedTasksList(
4
    tasks: List<Task>,
5
    onTaskClick: (String) -> Unit,
6
    onTaskToggle: (String) -> Unit,
7
    modifier: Modifier = Modifier
8
) {
9
    // Stable key for LazyColumn items
10
    LazyColumn(
11
        modifier = modifier,
12
        verticalArrangement = Arrangement.spacedBy(8.dp),
13
        contentPadding = PaddingValues(16.dp)
14
    ) {
15
        items(
16
            items = tasks,
17
            key = { task -> task.id }, // Stable key for better performance
18
            contentType = { "task_item" } // Content type for recycling
19
        ) { task ->
20
            // Use remember to avoid recreating lambdas
21
            val onClickCallback = remember(task.id) {
22
                { onTaskClick(task.id) }
23
            }
24
            val onToggleCallback = remember(task.id) {
25
                { onTaskToggle(task.id) }
26
            }
27

28
            TaskItem(
29
                task = task,
30
                onClick = onClickCallback,
31
                onToggle = onToggleCallback
32
            )
33
        }
34
    }
35
}
36

37
// Stable data classes to prevent unnecessary recompositions
38
@Stable
39
data class TaskUi(
40
    val id: String,
41
    val title: String,
42
    val description: String,
43
    val isCompleted: Boolean,
44
    val priority: TaskPriority,
45
    val dueDate: LocalDateTime?
46
)
47

48
// Convert domain model to UI model
49
fun Task.toUi(): TaskUi = TaskUi(
50
    id = id,
51
    title = title,
52
    description = description,
53
    isCompleted = isCompleted,
54
    priority = priority,
55
    dueDate = dueDate
56
)
57

58
// Immutable collections for better performance
59
@Composable
60
fun TasksWithImmutableList(
61
    tasks: ImmutableList<Task>,
62
    modifier: Modifier = Modifier
63
) {
64
    // ImmutableList prevents unnecessary recompositions
65
    LazyColumn(modifier = modifier) {
66
        items(
67
            count = tasks.size,
68
            key = { index -> tasks[index].id }
69
        ) { index ->
70
            val task = tasks[index]
71
            TaskItem(task = task)
72
        }
73
    }
74
}

Memory Management#

1
// MemoryOptimizedComposables.kt - Memory-conscious implementations
2
@Composable
3
fun TasksWithPaging(
4
    pagingTasks: LazyPagingItems<Task>,
5
    modifier: Modifier = Modifier
6
) {
7
    LazyColumn(modifier = modifier) {
8
        items(
9
            count = pagingTasks.itemCount,
10
            key = pagingTasks.itemKey { it.id }
11
        ) { index ->
12
            val task = pagingTasks[index]
13
            if (task != null) {
14
                TaskItem(task = task)
15
            } else {
16
                TaskItemPlaceholder()
17
            }
18
        }
19

20
        // Handle loading states
21
        when (val loadState = pagingTasks.loadState.append) {
22
            is LoadState.Loading -> {
23
                item {
24
                    LoadingItem()
25
                }
26
            }
27
            is LoadState.Error -> {
28
                item {
29
                    ErrorItem(
30
                        message = loadState.error.message ?: "Unknown error",
31
                        onRetry = { pagingTasks.retry() }
32
                    )
33
                }
34
            }
35
            else -> {}
36
        }
37
    }
38
}
39

40
// Disposable effects for cleanup
41
@Composable
42
fun TasksWithDisposableEffects(
43
    viewModel: TasksViewModel,
44
    modifier: Modifier = Modifier
45
) {
46
    val lifecycleOwner = LocalLifecycleOwner.current
47

48
    DisposableEffect(lifecycleOwner) {
49
        val observer = LifecycleEventObserver { _, event ->
50
            when (event) {
51
                Lifecycle.Event.ON_START -> {
52
                    viewModel.onScreenVisible()
53
                }
54
                Lifecycle.Event.ON_STOP -> {
55
                    viewModel.onScreenHidden()
56
                }
57
                else -> {}
58
            }
59
        }
60

61
        lifecycleOwner.lifecycle.addObserver(observer)
62

63
        onDispose {
64
            lifecycleOwner.lifecycle.removeObserver(observer)
65
            viewModel.cleanup()
66
        }
67
    }
68

69
    // Rest of composable...
70
}

Animation Performance#

1
// AnimationOptimization.kt - Performant animations
2
@Composable
3
fun AnimatedTaskItem(
4
    task: Task,
5
    modifier: Modifier = Modifier
6
) {
7
    // Use remember for animation specs to avoid recreation
8
    val animationSpec = remember {
9
        spring<Dp>(
10
            dampingRatio = Spring.DampingRatioMediumBouncy,
11
            stiffness = Spring.StiffnessLow
12
        )
13
    }
14

15
    // Animate multiple properties together
16
    val animatedValues = updateTransition(
17
        targetState = task.isCompleted,
18
        label = "task_completion"
19
    )
20

21
    val alpha by animatedValues.animateFloat(
22
        transitionSpec = { tween(300) },
23
        label = "alpha"
24
    ) { completed ->
25
        if (completed) 0.6f else 1.0f
26
    }
27

28
    val scale by animatedValues.animateFloat(
29
        transitionSpec = { animationSpec },
30
        label = "scale"
31
    ) { completed ->
32
        if (completed) 0.95f else 1.0f
33
    }
34

35
    Card(
36
        modifier = modifier
37
            .fillMaxWidth()
38
            .graphicsLayer {
39
                this.alpha = alpha
40
                scaleX = scale
41
                scaleY = scale
42
            }
43
    ) {
44
        // Task content...
45
    }
46
}
47

48
// Shared element transitions
49
@Composable
50
fun TasksWithSharedElements(
51
    tasks: List<Task>,
52
    onTaskClick: (Task) -> Unit,
53
    modifier: Modifier = Modifier
54
) {
55
    LazyColumn(modifier = modifier) {
56
        items(
57
            items = tasks,
58
            key = { it.id }
59
        ) { task ->
60
            SharedTransitionScope {
61
                Card(
62
                    onClick = { onTaskClick(task) },
63
                    modifier = Modifier
64
                        .fillMaxWidth()
65
                        .sharedElement(
66
                            state = rememberSharedContentState(key = "task-${task.id}"),
67
                            animatedVisibilityScope = this@SharedTransitionScope
68
                        )
69
                ) {
70
                    TaskContent(task = task)
71
                }
72
            }
73
        }
74
    }
75
}

Testing Architecture#

UI Testing with Compose#

1
// TasksScreenTest.kt - Comprehensive UI tests
2
@RunWith(AndroidJUnit4::class)
3
@HiltAndroidTest
4
class TasksScreenTest {
5

6
    @get:Rule(order = 0)
7
    val hiltRule = HiltAndroidRule(this)
8

9
    @get:Rule(order = 1)
10
    val composeTestRule = createAndroidComposeRule<ComponentActivity>()
11

12
    @BindValue
13
    @JvmField
14
    val tasksRepository: TasksRepository = mockk(relaxed = true)
15

16
    private lateinit var navController: TestNavHostController
17

18
    @Before
19
    fun setup() {
20
        hiltRule.inject()
21

22
        navController = TestNavHostController(
23
            ApplicationProvider.getApplicationContext()
24
        )
25
        navController.navigatorProvider.addNavigator(ComposeNavigator())
26
    }
27

28
    @Test
29
    fun tasksScreen_displaysTasksCorrectly() {
30
        // Given
31
        val tasks = listOf(
32
            Task("1", "Task 1", "Description 1"),
33
            Task("2", "Task 2", "Description 2", isCompleted = true)
34
        )
35
        every { tasksRepository.getAllTasks() } returns flowOf(tasks)
36

37
        // When
38
        composeTestRule.setContent {
39
            TasksTheme {
40
                CompositionLocalProvider(LocalNavController provides navController) {
41
                    TasksScreen(
42
                        onNavigateToAddTask = {},
43
                        onNavigateToTaskDetail = {}
44
                    )
45
                }
46
            }
47
        }
48

49
        // Then
50
        composeTestRule.onNodeWithText("Task 1").assertIsDisplayed()
51
        composeTestRule.onNodeWithText("Task 2").assertIsDisplayed()
52
        composeTestRule.onNodeWithText("Description 1").assertIsDisplayed()
53

54
        // Check that completed task has correct styling
55
        composeTestRule.onAllNodesWithTag("task_item_2")
56
            .onFirst()
57
            .assertExists()
58
    }
59

60
    @Test
61
    fun tasksScreen_searchFunctionality_filtersTasksCorrectly() {
62
        // Given
63
        val tasks = listOf(
64
            Task("1", "Important Task", "Urgent description"),
65
            Task("2", "Regular Task", "Normal description")
66
        )
67
        every { tasksRepository.getAllTasks() } returns flowOf(tasks)
68

69
        composeTestRule.setContent {
70
            TasksTheme {
71
                TasksScreen(
72
                    onNavigateToAddTask = {},
73
                    onNavigateToTaskDetail = {}
74
                )
75
            }
76
        }
77

78
        // When - Search for "Important"
79
        composeTestRule.onNodeWithTag("search_field").performTextInput("Important")
80

81
        // Then - Only matching task should be visible
82
        composeTestRule.onNodeWithText("Important Task").assertIsDisplayed()
83
        composeTestRule.onNodeWithText("Regular Task").assertDoesNotExist()
84
    }
85

86
    @Test
87
    fun tasksScreen_multiSelectMode_worksCorrectly() {
88
        // Given
89
        val tasks = listOf(
90
            Task("1", "Task 1", "Description 1"),
91
            Task("2", "Task 2", "Description 2")
92
        )
93
        every { tasksRepository.getAllTasks() } returns flowOf(tasks)
94

95
        composeTestRule.setContent {
96
            TasksTheme {
97
                TasksScreen(
98
                    onNavigateToAddTask = {},
99
                    onNavigateToTaskDetail = {}
100
                )
101
            }
102
        }
103

104
        // When - Long press on first task
105
        composeTestRule.onNodeWithTag("task_item_1").performTouchInput {
106
            longClick()
107
        }
108

109
        // Then - Multi-select mode should be active
110
        composeTestRule.onNodeWithText("1 selected").assertIsDisplayed()
111
        composeTestRule.onNodeWithContentDescription("Delete selected").assertIsDisplayed()
112

113
        // When - Click second task
114
        composeTestRule.onNodeWithTag("task_item_2").performClick()
115

116
        // Then - Both tasks should be selected
117
        composeTestRule.onNodeWithText("2 selected").assertIsDisplayed()
118
    }
119

120
    @Test
121
    fun tasksScreen_fabClick_navigatesToAddTask() {
122
        // Given
123
        every { tasksRepository.getAllTasks() } returns flowOf(emptyList())
124

125
        var navigatedToAddTask = false
126
        composeTestRule.setContent {
127
            TasksTheme {
128
                TasksScreen(
129
                    onNavigateToAddTask = { navigatedToAddTask = true },
130
                    onNavigateToTaskDetail = {}
131
                )
132
            }
133
        }
134

135
        // When
136
        composeTestRule.onNodeWithTag("fab_add_task").performClick()
137

138
        // Then
139
        assertTrue(navigatedToAddTask)
140
    }
141

142
    @Test
143
    fun tasksScreen_emptyState_displaysCorrectly() {
144
        // Given
145
        every { tasksRepository.getAllTasks() } returns flowOf(emptyList())
146

147
        composeTestRule.setContent {
148
            TasksTheme {
149
                TasksScreen(
150
                    onNavigateToAddTask = {},
151
                    onNavigateToTaskDetail = {}
152
                )
153
            }
154
        }
155

156
        // Then
157
        composeTestRule.onNodeWithText("No tasks yet").assertIsDisplayed()
158
        composeTestRule.onNodeWithText("Tap the + button to add your first task")
159
            .assertIsDisplayed()
160
    }
161

162
    @Test
163
    fun tasksScreen_errorState_displaysCorrectly() {
164
        // Given
165
        every { tasksRepository.getAllTasks() } returns flow {
166
            throw IOException("Network error")
167
        }
168

169
        composeTestRule.setContent {
170
            TasksTheme {
171
                TasksScreen(
172
                    onNavigateToAddTask = {},
173
                    onNavigateToTaskDetail = {}
174
                )
175
            }
176
        }
177

178
        // Then
179
        composeTestRule.onNodeWithText("Network error. Please check your connection.")
180
            .assertIsDisplayed()
181
        composeTestRule.onNodeWithText("Retry").assertIsDisplayed()
182
    }
183
}

Unit Testing Composables#

1
// TaskItemTest.kt - Unit testing individual composables
2
@RunWith(RobolectricTestRunner::class)
3
class TaskItemTest {
4

5
    @get:Rule
6
    val composeTestRule = createComposeRule()
7

8
    @Test
9
    fun taskItem_completedTask_hasCorrectStyling() {
10
        // Given
11
        val completedTask = Task(
12
            id = "1",
13
            title = "Completed Task",
14
            description = "This is done",
15
            isCompleted = true
16
        )
17

18
        // When
19
        composeTestRule.setContent {
20
            TasksTheme {
21
                TaskItem(
22
                    task = completedTask,
23
                    isSelected = false,
24
                    isMultiSelectMode = false,
25
                    onTaskClick = {},
26
                    onTaskLongClick = {},
27
                    onTaskToggle = {}
28
                )
29
            }
30
        }
31

32
        // Then
33
        val taskTitle = composeTestRule.onNodeWithText("Completed Task")
34
        taskTitle.assertIsDisplayed()
35

36
        // Check if checkbox is checked
37
        composeTestRule.onNode(hasTestTag("task_checkbox_1") and isToggleable())
38
            .assertIsOn()
39
    }
40

41
    @Test
42
    fun taskItem_highPriorityTask_showsCorrectIndicator() {
43
        // Given
44
        val highPriorityTask = Task(
45
            id = "1",
46
            title = "Urgent Task",
47
            description = "Very important",
48
            priority = TaskPriority.HIGH
49
        )
50

51
        // When
52
        composeTestRule.setContent {
53
            TasksTheme {
54
                TaskItem(
55
                    task = highPriorityTask,
56
                    isSelected = false,
57
                    isMultiSelectMode = false,
58
                    onTaskClick = {},
59
                    onTaskLongClick = {},
60
                    onTaskToggle = {}
61
                )
62
            }
63
        }
64

65
        // Then
66
        composeTestRule.onNodeWithTag("priority_indicator_HIGH")
67
            .assertIsDisplayed()
68
    }
69

70
    @Test
71
    fun taskItem_dueToday_showsCorrectChip() {
72
        // Given
73
        val dueTodayTask = Task(
74
            id = "1",
75
            title = "Due Today Task",
76
            description = "Deadline approaching",
77
            dueDate = LocalDateTime.now().plusHours(2)
78
        )
79

80
        // When
81
        composeTestRule.setContent {
82
            TasksTheme {
83
                TaskItem(
84
                    task = dueTodayTask,
85
                    isSelected = false,
86
                    isMultiSelectMode = false,
87
                    onTaskClick = {},
88
                    onTaskLongClick = {},
89
                    onTaskToggle = {}
90
                )
91
            }
92
        }
93

94
        // Then
95
        composeTestRule.onNodeWithText("Due Today").assertIsDisplayed()
96
    }
97
}

Advanced Patterns#

Custom Compose Modifiers#

1
// CustomModifiers.kt - Reusable custom modifiers
2
fun Modifier.shimmerEffect(): Modifier = composed {
3
    var size by remember { mutableStateOf(IntSize.Zero) }
4
    val transition = rememberInfiniteTransition(label = "shimmer")
5
    val startOffsetX by transition.animateFloat(
6
        initialValue = -2 * size.width.toFloat(),
7
        targetValue = 2 * size.width.toFloat(),
8
        animationSpec = infiniteRepeatable(
9
            animation = tween(1000)
10
        ),
11
        label = "shimmer_offset"
12
    )
13

14
    background(
15
        brush = Brush.linearGradient(
16
            colors = listOf(
17
                Color(0xFFB0B0B0),
18
                Color(0xFFC0C0C0),
19
                Color(0xFFB0B0B0),
20
            ),
21
            start = Offset(startOffsetX, 0f),
22
            end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
23
        )
24
    )
25
        .onGloballyPositioned { size = it.size }
26
}
27

28
fun Modifier.pulsate(
29
    enabled: Boolean = true,
30
    duration: Int = 1000
31
): Modifier = composed {
32
    if (!enabled) return@composed this
33

34
    val infiniteTransition = rememberInfiniteTransition(label = "pulsate")
35
    val alpha by infiniteTransition.animateFloat(
36
        initialValue = 1f,
37
        targetValue = 0.3f,
38
        animationSpec = infiniteRepeatable(
39
            animation = tween(duration),
40
            repeatMode = RepeatMode.Reverse
41
        ),
42
        label = "pulsate_alpha"
43
    )
44

45
    graphicsLayer { this.alpha = alpha }
46
}
47

48
fun Modifier.swipeToDelete(
49
    onDelete: () -> Unit,
50
    deleteThreshold: Dp = 120.dp
51
): Modifier = composed {
52
    val density = LocalDensity.current
53
    val thresholdPx = with(density) { deleteThreshold.toPx() }
54
    var offsetX by remember { mutableFloatStateOf(0f) }
55
    val animatedOffsetX by animateFloatAsState(
56
        targetValue = offsetX,
57
        label = "swipe_offset"
58
    )
59

60
    pointerInput(Unit) {
61
        detectHorizontalDragGestures(
62
            onDragEnd = {
63
                if (offsetX < -thresholdPx) {
64
                    onDelete()
65
                }
66
                offsetX = 0f
67
            }
68
        ) { _, dragAmount ->
69
            offsetX = (offsetX + dragAmount).coerceAtMost(0f)
70
        }
71
    }
72
        .offset { IntOffset(animatedOffsetX.roundToInt(), 0) }
73
}

State Hoisting Patterns#

1
// StateHoistingPatterns.kt - Proper state hoisting examples
2
@Composable
3
fun TasksFilterSection(
4
    selectedFilter: TaskFilter,
5
    onFilterChange: (TaskFilter) -> Unit,
6
    modifier: Modifier = Modifier
7
) {
8
    // State is hoisted - this composable doesn't own the state
9
    Row(
10
        modifier = modifier.horizontalScroll(rememberScrollState()),
11
        horizontalArrangement = Arrangement.spacedBy(8.dp)
12
    ) {
13
        TaskFilter.values().forEach { filter ->
14
            FilterChip(
15
                selected = filter == selectedFilter,
16
                onClick = { onFilterChange(filter) },
17
                label = { Text(filter.displayName) }
18
            )
19
        }
20
    }
21
}
22

23
// Stateful wrapper that can own the state if needed
24
@Composable
25
fun StatefulTasksFilterSection(
26
    initialFilter: TaskFilter = TaskFilter.ALL,
27
    onFilterChange: ((TaskFilter) -> Unit)? = null,
28
    modifier: Modifier = Modifier
29
) {
30
    var selectedFilter by remember(initialFilter) { mutableStateOf(initialFilter) }
31

32
    TasksFilterSection(
33
        selectedFilter = selectedFilter,
34
        onFilterChange = { filter ->
35
            selectedFilter = filter
36
            onFilterChange?.invoke(filter)
37
        },
38
        modifier = modifier
39
    )
40
}

Best Practices Summary#

Architecture Guidelines#

Unidirectional Data Flow: Data flows down, events flow up
State Hoisting: Hoist state to the lowest common ancestor
Single Source of Truth: Each piece of state has one owner
Immutable State: Use immutable data classes for UI state
Side Effect Management: Use LaunchedEffect and other effect APIs properly

Performance Best Practices#

Avoid Unnecessary Recompositions: Use Stable and Immutable annotations
Stable Keys: Always provide stable keys for lists
Remember Lambdas: Use remember to avoid recreating lambdas
Lazy Loading: Implement pagination for large datasets
Animation Optimization: Use shared animation specs

Testing Strategy#

Test Pyramid: More unit tests, fewer UI tests
Test Composables: Test individual composables in isolation
Mock Dependencies: Use test doubles for external dependencies
State Testing: Test state changes and side effects
Accessibility Testing: Include accessibility in your test suite

Conclusion#

Jetpack Compose provides powerful tools for building modern Android UIs, but success depends on following proper architectural patterns. By implementing proper state management, optimizing for performance, and maintaining comprehensive tests, developers can build scalable and maintainable Compose applications.

Key takeaways:

Modern Architecture: Declarative UI with reactive state management
Performance Focus: Optimized recomposition and memory usage
Testing Excellence: Comprehensive testing strategy for UI and logic
Best Practices: Proven patterns from Google’s recommendations
Scalability: Architecture that supports team collaboration and app growth