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

@Composable

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