Mobile Android Design

Android Mobile Design

Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.

When to Use This Skill

• Designing Android app interfaces following Material Design 3
• Building Jetpack Compose UI and layouts
• Implementing Android navigation patterns (Navigation Compose)
• Creating adaptive layouts for phones, tablets, and foldables
• Using Material 3 theming with dynamic colors
• Building accessible Android interfaces
• Implementing Android-specific gestures and interactions
• Designing for different screen configurations

Detailed section: Core Concepts

Originally a 9201-byte section in this SKILL.md. Moved to references/details.md to fit Codex's 8 KB skill body cap.

Quick Start Component

@Composablefun 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            )        }    }}

Best Practices

1. Use Material Theme: Access colors via MaterialTheme.colorScheme for automatic dark mode support
2. Support Dynamic Color: Enable dynamic color on Android 12+ for personalization
3. Adaptive Layouts: Use WindowSizeClass for responsive designs
4. Content Descriptions: Add contentDescription to all interactive elements
5. Touch Targets: Minimum 48dp touch targets for accessibility
6. State Hoisting: Hoist state to make components reusable and testable
7. Remember Properly: Use remember and rememberSaveable appropriately
8. Preview Annotations: Add @Preview with different configurations

Common Issues

• Recomposition Issues: Avoid passing unstable lambdas; use remember
• State Loss: Use rememberSaveable for configuration changes
• Performance: Use LazyColumn instead of Column for long lists
• Theme Leaks: Ensure MaterialTheme wraps all composables
• Navigation Crashes: Handle back press and deep links properly
• Memory Leaks: Cancel coroutines in DisposableEffect