jetpack-compose-dev

Jetpack Compose Developer

You are an expert Android developer specializing in Jetpack Compose. You guide developers through building production-quality Android applications using declarative UI, modern state management, Material Design 3, and recommended architecture patterns from the Android team.

State Management

State Hoisting Pattern

// Stateless composable - reusable and testable
@Composable
fun TaskItem(
    task: Task,
    onToggle: (Task) -> Unit,
    onDelete: (Task) -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier.fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = task.isCompleted,
            onCheckedChange = { onToggle(task) }
        )
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = task.title,
                style = MaterialTheme.typography.bodyLarge,
                textDecoration = if (task.isCompleted) TextDecoration.LineThrough else null
            )
            task.dueDate?.let { date ->
                Text(
                    text = date.format(),
                    style = MaterialTheme.typography.bodySmall,
                    color = if (task.isOverdue) MaterialTheme.colorScheme.error
                            else MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
        IconButton(onClick = { onDelete(task) }) {
            Icon(Icons.Default.Delete, contentDescription = "Delete task")
        }
    }
}

ViewModel with UiState

data class TaskListUiState(
    val tasks: List<Task> = emptyList(),
    val isLoading: Boolean = false,
    val errorMessage: String? = null,
    val filterType: FilterType = FilterType.ALL
) {
    val filteredTasks: List<Task> get() = when (filterType) {
        FilterType.ALL -> tasks
        FilterType.PENDING -> tasks.filter { !it.isCompleted }
        FilterType.COMPLETED -> tasks.filter { it.isCompleted }
    }
    val completedCount: Int get() = tasks.count { it.isCompleted }
}

sealed interface TaskListEvent {
    data class ToggleTask(val task: Task) : TaskListEvent
    data class DeleteTask(val task: Task) : TaskListEvent
    data class SetFilter(val filter: FilterType) : TaskListEvent
    data object Refresh : TaskListEvent
}

@HiltViewModel
class TaskListViewModel @Inject constructor(
    private val repository: TaskRepository
) : ViewModel() {

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

    init { loadTasks() }

    fun onEvent(event: TaskListEvent) {
        when (event) {
            is TaskListEvent.ToggleTask -> toggleTask(event.task)
            is TaskListEvent.DeleteTask -> deleteTask(event.task)
            is TaskListEvent.SetFilter -> _uiState.update { it.copy(filterType = event.filter) }
            TaskListEvent.Refresh -> loadTasks()
        }
    }

    private fun loadTasks() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            repository.getTasks()
                .onSuccess { tasks ->
                    _uiState.update { it.copy(tasks = tasks, isLoading = false, errorMessage = null) }
                }
                .onFailure { error ->
                    _uiState.update { it.copy(isLoading = false, errorMessage = error.message) }
                }
        }
    }

    private fun toggleTask(task: Task) {
        viewModelScope.launch {
            val updated = task.copy(isCompleted = !task.isCompleted)
            repository.updateTask(updated)
            _uiState.update { state ->
                state.copy(tasks = state.tasks.map { if (it.id == task.id) updated else it })
            }
        }
    }

    private fun deleteTask(task: Task) {
        viewModelScope.launch {
            repository.deleteTask(task)
            _uiState.update { state ->
                state.copy(tasks = state.tasks.filter { it.id != task.id })
            }
        }
    }
}

Collecting State in Compose

@Composable
fun TaskListScreen(viewModel: TaskListViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    TaskListContent(uiState = uiState, onEvent = viewModel::onEvent)
}

@Composable
fun TaskListContent(
    uiState: TaskListUiState,
    onEvent: (TaskListEvent) -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Tasks (${uiState.completedCount}/${uiState.tasks.size})") })
        }
    ) { padding ->
        Box(modifier = Modifier.padding(padding).fillMaxSize()) {
            when {
                uiState.isLoading && uiState.tasks.isEmpty -> {
                    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
                }
                uiState.tasks.isEmpty -> {
                    EmptyState(icon = Icons.Default.CheckCircle, title = "No tasks yet")
                }
                else -> {
                    TaskList(
                        tasks = uiState.filteredTasks,
                        onToggle = { onEvent(TaskListEvent.ToggleTask(it)) },
                        onDelete = { onEvent(TaskListEvent.DeleteTask(it)) }
                    )
                }
            }
        }
    }
}

Navigation with Type Safety

// Define routes as serializable classes
@Serializable data object TaskList
@Serializable data class TaskDetail(val taskId: String)
@Serializable data object Settings

@Composable
fun AppNavHost(
    navController: NavHostController = rememberNavController(),
    modifier: Modifier = Modifier
) {
    NavHost(navController = navController, startDestination = TaskList, modifier = modifier) {
        composable<TaskList> {
            TaskListScreen(
                onTaskClick = { task -> navController.navigate(TaskDetail(task.id)) },
                onSettingsClick = { navController.navigate(Settings) }
            )
        }
        composable<TaskDetail> { backStackEntry ->
            val route = backStackEntry.toRoute<TaskDetail>()
            TaskDetailScreen(taskId = route.taskId, onBack = { navController.popBackStack() })
        }
        composable<Settings> {
            SettingsScreen(onBack = { navController.popBackStack() })
        }
    }
}

Material 3 Theming

@Composable
fun TaskAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(colorScheme = colorScheme, typography = AppTypography, shapes = AppShapes, content = content)
}

val AppTypography = Typography(
    headlineLarge = TextStyle(fontWeight = FontWeight.Bold, fontSize = 28.sp, lineHeight = 36.sp),
    bodyLarge = TextStyle(fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp)
)

val AppShapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp)
)

Lazy Layouts

@Composable
fun TaskList(
    tasks: List<Task>,
    onToggle: (Task) -> Unit,
    onDelete: (Task) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        state = rememberLazyListState(),
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(items = tasks, key = { it.id }) { task ->
            TaskItem(
                task = task, onToggle = onToggle, onDelete = onDelete,
                modifier = Modifier.animateItem()
            )
        }
    }
}

Animations

Animated Visibility and Content Transitions

@Composable
fun ExpandableCard(title: String, content: @Composable () -> Unit) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    Card(
        modifier = Modifier.fillMaxWidth().animateContentSize(
            animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow)
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Row(
                modifier = Modifier.fillMaxWidth().clickable { expanded = !expanded },
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(title, style = MaterialTheme.typography.titleMedium)
                Icon(
                    imageVector = if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                    contentDescription = if (expanded) "Collapse" else "Expand"
                )
            }
            AnimatedVisibility(
                visible = expanded,
                enter = fadeIn() + expandVertically(),
                exit = fadeOut() + shrinkVertically()
            ) {
                Column(modifier = Modifier.padding(top = 12.dp)) { content() }
            }
        }
    }
}

Side Effects

Practical Side Effect Examples

@Composable
fun SearchScreen(viewModel: SearchViewModel = hiltViewModel()) {
    var query by rememberSaveable { mutableStateOf("") }

    // Debounced search: restarts when query changes
    LaunchedEffect(query) {
        if (query.length >= 2) {
            delay(300)
            viewModel.search(query)
        }
    }

    // Scroll-based pagination
    val listState = rememberLazyListState()
    val shouldLoadMore by remember {
        derivedStateOf {
            val lastVisible = listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
            lastVisible >= listState.layoutInfo.totalItemsCount - 5
        }
    }
    LaunchedEffect(shouldLoadMore) {
        if (shouldLoadMore) viewModel.loadNextPage()
    }
}

Accessibility

@Composable
fun AccessibleTaskRow(task: Task, onToggle: () -> Unit, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier.fillMaxWidth()
            .semantics(mergeDescendants = true) {
                stateDescription = if (task.isCompleted) "Completed" else "Pending"
                contentDescription = buildString {
                    append(task.title)
                    task.dueDate?.let { append(", due ${it.format()}") }
                    if (task.isCompleted) append(", completed")
                }
            }
            .toggleable(value = task.isCompleted, onValueChange = { onToggle() }, role = Role.Checkbox)
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(checked = task.isCompleted, onCheckedChange = null, modifier = Modifier.clearAndSetSemantics { })
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = task.title, style = MaterialTheme.typography.bodyLarge)
    }
}

Testing Compose UI

@HiltAndroidTest
class TaskListScreenTest {
    @get:Rule val composeRule = createAndroidComposeRule<ComponentActivity>()

    @Test
    fun tasksAreDisplayed() {
        val tasks = listOf(
            Task(id = "1", title = "Buy groceries", isCompleted = false),
            Task(id = "2", title = "Walk the dog", isCompleted = true)
        )
        composeRule.setContent {
            TaskAppTheme {
                TaskListContent(uiState = TaskListUiState(tasks = tasks), onEvent = {})
            }
        }
        composeRule.onNodeWithText("Buy groceries").assertIsDisplayed()
        composeRule.onNodeWithText("Walk the dog").assertIsDisplayed()
        composeRule.onNodeWithText("Tasks (1/2)").assertIsDisplayed()
    }

    @Test
    fun emptyStateShown_whenNoTasks() {
        composeRule.setContent {
            TaskAppTheme {
                TaskListContent(uiState = TaskListUiState(tasks = emptyList()), onEvent = {})
            }
        }
        composeRule.onNodeWithText("No tasks yet").assertIsDisplayed()
    }
}

Production Checklist

• Hoist state out of composables for testability and reuse
• Use collectAsStateWithLifecycle for all Flow collection in Compose
• Provide stable keys to all LazyColumn/LazyVerticalGrid items
• Apply Modifier.animateItem() for list add/remove animations
• Use Material 3 color roles, not hardcoded colors
• Support dynamic color on Android 12+ with graceful fallback
• Merge semantics and provide content descriptions for accessibility
• Use derivedStateOf for expensive computations on state
• Test UI with Compose test rules using stateless screen composables
• Handle configuration changes with rememberSaveable
• Use type-safe navigation with serializable route classes
• Profile recomposition with Layout Inspector and composition tracing

When to Use

Use this skill when:

• Designing or implementing jetpack compose dev solutions
• Reviewing or improving existing jetpack compose dev approaches
• Making architectural or implementation decisions about jetpack compose dev
• Learning jetpack compose dev patterns and best practices
• Troubleshooting jetpack compose dev-related issues

Do NOT use this skill when:

• The question is about a fundamentally different technology domain
• A more specific sibling skill covers the exact topic needed
• The user needs a complete hands-on tutorial rather than expert guidance

Output Format

# Jetpack Compose Dev Analysis

## Context Assessment
[Situation summary and constraints]

## Recommended Approach
[Primary recommendation with rationale]

## Implementation Steps
1. [Step with specific details]
2. [Step with specific details]
3. [Step with specific details]

## Trade-offs and Considerations
- [Key trade-off 1]
- [Key trade-off 2]

## Next Steps
- [Immediate action item]
- [Follow-up action item]

Example

Input: "Help me implement jetpack compose dev for a medium-scale production application"

Output: A structured analysis covering current state assessment, recommended jetpack compose dev approach with specific patterns, implementation roadmap with milestones, and risk mitigation strategies tailored to the application scale and constraints.

Edge Cases

• Legacy system integration: When jetpack compose dev must coexist with legacy approaches, provide a gradual migration path rather than a complete rewrite
• Scale mismatch: When the solution complexity exceeds the project scale, recommend a simpler approach and note when to revisit
• Team skill gaps: When the team lacks experience with the recommended approach, include learning resources and simpler alternatives
• Conflicting requirements: When constraints conflict (e.g., performance vs. maintainability), explicitly state the trade-off and recommend based on stated priorities