| name | designing-android-interfaces |
| description | Design and implement Android UI with Material Design 3 and Jetpack Compose, including adaptive layouts, navigation, theming, and accessibility. Use this when creating or refactoring native Android screens and design systems. |
Designing Android Interfaces
Build production-ready Android UI using Material Design 3 and Jetpack Compose.
When To Use
Use this skill when the task involves one or more of the following:
- Creating or redesigning native Android screens
- Implementing Compose layouts or component systems
- Applying Material 3 tokens, color, typography, and shape
- Building adaptive UX for phone, tablet, and foldable form factors
- Improving Android accessibility, usability, and interaction quality
Do not use this skill for Flutter, React Native, or iOS-specific UI work.
Inputs To Collect First
Capture these constraints before implementation:
- Android min/target SDK and Compose BOM version
- Screen goals and priority user journeys
- Required states: loading, empty, populated, error, offline
- Device classes to support: compact, medium, expanded widths
- Branding constraints and whether dynamic color is allowed
- Accessibility requirements (contrast, text scaling, screen reader)
If any item is missing, continue with reasonable defaults and list assumptions.
Workflow
- Define the UI contract.
- List all states and transitions.
- Specify content hierarchy (primary action, secondary actions, metadata).
- Map gestures and back behavior.
- Pick navigation pattern by information architecture.
- Bottom bar for 3-5 top-level destinations.
- Navigation rail or drawer for larger screens.
- Keep navigation predictable; avoid hidden primary actions.
- Build adaptive layout first, then polish.
- Use window size classes to switch structure, not just spacing.
- Prefer reusable screen sections over one giant composable.
- Keep scrolling behavior and app bars consistent across states.
- Apply Material 3 theming correctly.
- Use
MaterialTheme.colorScheme, typography, and shapes tokens.
- Support dynamic color where product constraints allow it.
- Avoid hardcoded colors except for brand exceptions.
- Bake accessibility into implementation.
- Ensure 48dp minimum touch targets.
- Provide meaningful
contentDescription only where useful.
- Validate contrast and test at large font sizes.
- Ensure proper focus order and semantic grouping.
- Validate before finalizing.
- Preview and test compact/medium/expanded layouts.
- Verify dark/light and dynamic/non-dynamic color behavior.
- Confirm all core states render and actions remain reachable.
Implementation Rules
- Prefer stateless UI composables with state hoisted to screen/view-model layer.
- Separate route-level orchestration from presentational composables.
- Use immutable UI state models; avoid passing raw data sources to UI.
- Keep component APIs narrow and predictable.
- Use
LazyColumn/LazyVerticalGrid for large lists.
- Use Material 3 components unless product requirements justify custom variants.
Output Format
When producing a solution, provide:
- Assumptions made
- Chosen navigation and adaptive strategy
- Theme decisions (dynamic color, typography, key tokens)
- Accessibility checks performed
- Kotlin Compose code for core screen + preview(s)
References
Read these only when needed:
- Layout, window size classes, and navigation patterns:
references/adaptive-navigation.md
- Material 3 tokens, theming, and accessibility checklist:
references/material3-accessibility.md
