Design Mobile para Android

Domine o Material Design 3 (Material You) e o Jetpack Compose para criar aplicativos Android modernos e adaptáveis que se integram perfeitamente ao ecossistema Android.

Quando Usar Esta Habilidade

• Projetar interfaces de aplicativos Android seguindo o Material Design 3
• Construir UI e layouts com Jetpack Compose
• Implementar padrões de navegação Android (Navigation Compose)
• Criar layouts adaptáveis para celulares, tablets e dobráveis
• Usar o tema Material 3 com cores dinâmicas
• Construir interfaces Android acessíveis
• Implementar gestos e interações específicos do Android
• Projetar para diferentes configurações de tela

Seção Detalhada: Conceitos Fundamentais

Originalmente uma seção de 9201 bytes neste SKILL.md. Movida para references/details.md para se ajustar ao limite de 8 KB do corpo da habilidade do Codex.

Componente de Início Rápido

@Composable
fun ItemListCard(
    item: Item,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onItemClick,
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onPrimaryContainer
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = item.subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            Icon(
                imageVector = Icons.Default.ChevronRight,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

Melhores Práticas

1. Use o Tema Material: Acesse as cores via MaterialTheme.colorScheme para suporte automático ao modo escuro
2. Suporte a Cores Dinâmicas: Habilite a cor dinâmica no Android 12+ para personalização
3. Layouts Adaptáveis: Use WindowSizeClass para designs responsivos
4. Descrições de Conteúdo: Adicione contentDescription a todos os elementos interativos
5. Alvos de Toque: Alvos de toque mínimos de 48dp para acessibilidade
6. Elevação de Estado (State Hoisting): Eleve o estado para tornar os componentes reutilizáveis e testáveis
7. Lembre-se Corretamente: Use remember e rememberSaveable apropriadamente
8. Anotações de Pré-visualização: Adicione @Preview com diferentes configurações

Problemas Comuns

• Problemas de Recomposição: Evite passar lambdas instáveis; use remember
• Perda de Estado: Use rememberSaveable para mudanças de configuração
• Desempenho: Use LazyColumn em vez de Column para listas longas
• Vazamentos de Tema: Certifique-se de que MaterialTheme envolva todos os composables
• Travamentos de Navegação: Lide com o pressionamento de volta e links profundos corretamente
• Vazamentos de Memória: Cancele corrotinas em DisposableEffect