android-kotlin-compose

Android Kotlin Compose

Expert guidance for Android development using Kotlin and Jetpack Compose with modern architecture patterns.

When to Use This Skill

Invoke this skill when:

• Building Android UIs with Jetpack Compose
• Implementing MVVM architecture with ViewModels and StateFlow
• Managing state in Compose applications (remember, State hoisting)
• Integrating Jetpack libraries (Navigation, Room, Hilt, ViewModel, WorkManager)
• Designing Material3 interfaces and theming
• User explicitly mentions "Compose", "Kotlin Android", "Jetpack", or related libraries

Core Principles

1. Compose-First UI — Declarative UI with composable functions
2. Unidirectional Data Flow — State flows down, events flow up
3. Single Source of Truth — ViewModel owns UI state
4. Separation of Concerns — UI layer decoupled from data layer

Quick Reference

Project Structure (Recommended)

app/src/main/java/com/example/app/
├── di/                     # Hilt modules
│   └── AppModule.kt
├── data/
│   ├── local/              # Room database
│   │   ├── dao/
│   │   ├── entity/
│   │   └── AppDatabase.kt
│   ├── remote/             # Network layer
│   │   ├── api/
│   │   └── dto/
│   └── repository/         # Repository implementations
├── domain/
│   ├── model/              # Domain models
│   ├── repository/         # Repository interfaces
│   └── usecase/            # Business logic
├── ui/
│   ├── components/         # Reusable composables
│   ├── theme/              # Material3 theming
│   │   ├── Color.kt
│   │   ├── Type.kt
│   │   └── Theme.kt
│   ├── navigation/         # Navigation graph
│   └── screens/            # Feature screens
│       └── feature/
│           ├── FeatureScreen.kt
│           └── FeatureViewModel.kt
└── App.kt                  # Application class

UI Development Patterns

Screen Pattern with ViewModel

// FeatureViewModel.kt
@HiltViewModel
class FeatureViewModel @Inject constructor(
    private val repository: FeatureRepository
) : ViewModel() {

    private val _uiState = MutableStateFlow(FeatureUiState())
    val uiState: StateFlow<FeatureUiState> = _uiState.asStateFlow()

    fun onAction(action: FeatureAction) {
        when (action) {
            is FeatureAction.LoadData -> loadData()
            is FeatureAction.UpdateItem -> updateItem(action.item)
        }
    }

    private fun loadData() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            repository.getData()
                .onSuccess { data ->
                    _uiState.update { it.copy(data = data, isLoading = false) }
                }
                .onFailure { error ->
                    _uiState.update { it.copy(error = error.message, isLoading = false) }
                }
        }
    }
}

// FeatureUiState.kt
data class FeatureUiState(
    val data: List<Item> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null
)

sealed interface FeatureAction {
    data object LoadData : FeatureAction
    data class UpdateItem(val item: Item) : FeatureAction
}

// FeatureScreen.kt
@Composable
fun FeatureScreen(
    viewModel: FeatureViewModel = hiltViewModel(),
    onNavigateToDetail: (String) -> Unit
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    FeatureContent(
        uiState = uiState,
        onAction = viewModel::onAction,
        onNavigateToDetail = onNavigateToDetail
    )
}

@Composable
private fun FeatureContent(
    uiState: FeatureUiState,
    onAction: (FeatureAction) -> Unit,
    onNavigateToDetail: (String) -> Unit
) {
    // Stateless composable - easy to preview and test
    when {
        uiState.isLoading -> LoadingIndicator()
        uiState.error != null -> ErrorMessage(uiState.error)
        else -> ItemList(
            items = uiState.data,
            onItemClick = { onNavigateToDetail(it.id) }
        )
    }
}