designing-android-interfaces

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

1. Define the UI contract.

• List all states and transitions.
• Specify content hierarchy (primary action, secondary actions, metadata).
• Map gestures and back behavior.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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