android-jetpack-compose-expert

name	android-jetpack-compose-expert
description	Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	mobile
risk	safe
source	community
tags	["skill","software-development","mobile","android","jetpack","compose"]

Android Jetpack Compose Expert

Overview

A comprehensive guide for building production-quality Android applications using Jetpack Compose. This skill covers architectural patterns, state management with ViewModels, navigation type-safety, and performance optimization techniques.

When to Use This Skill

• Use when starting a new Android project with Jetpack Compose.
• Use when migrating legacy XML layouts to Compose.
• Use when implementing complex UI state management and side effects.
• Use when optimizing Compose performance (recomposition counts, stability).
• Use when setting up Navigation with type safety.

Step-by-Step Guide

1. Project Setup & Dependencies

Ensure your libs.versions.toml includes the necessary Compose BOM and libraries.

[versions]
composeBom = "2024.02.01"
activityCompose = "1.8.2"

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }

2. State Management Pattern (MVI/MVVM)

Use ViewModel with StateFlow to expose UI state. Avoid exposing MutableStateFlow.

// UI State Definition
data class UserUiState(
    val isLoading: Boolean = false,
     user: User? = ,
     error: String? = 
)


   (
      userRepository: UserRepository
) : ViewModel() {

      _uiState = MutableStateFlow(UserUiState())
     uiState: StateFlow<UserUiState> = _uiState.asStateFlow()

     {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = ) }
             {
                 user = userRepository.getUser()
                _uiState.update { it.copy(user = user, isLoading = ) }
            }  (e: Exception) {
                _uiState.update { it.copy(error = e.message, isLoading = ) }
            }
        }
    }
}