/android-design

name: android-design
description: Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable. Builds Android apps across system-like Compose, branded Compose, React Native, Flutter, and Compose Multiplatform while preserving UX decisions, state coverage, adaptive navigation, Material motion, accessibility, and product-specific visual direction. ALWAYS ask which track first. SKIP when the target is only iOS, Windows, or web-in-browser.

android-design — pick the track first

Android has multiple stacks with different visual ceilings. **Ask the user which one before any code.**

What This Skill Can Do

• Choose the right Android track: strict Compose/Material, branded Compose, React Native, Flutter, or Compose Multiplatform.
• Design mobile task flows, onboarding, forms, settings, dashboards, media/product surfaces, foldables, tablets, and adaptive layouts.
• Preserve UX briefs, state coverage, navigation hierarchy, gesture/back behavior, loading/error/permission states, and accessibility.
• Apply Material 3 Expressive, dynamic color, edge-to-edge, predictive back, motion schemes, shape, typography, and responsive window-size classes.
• Add branded originality through content surfaces, composition, typography, and state treatment without breaking Android idioms.

Step 0 (MANDATORY) — Ask the user which track

> Which track for this app? > > **1. System-like native (Jetpack Compose + Material 3 Expressive strict)** — feels like Pixel Launcher, Google Calendar, Settings. Best for: utilities, system tools, productivity. Spring physics, shape morphing, wavy progress, dynamic color (Material You). Examples: Read You, Androidify sample, Files by Google. > > **2. Branded native (Compose + custom Material theme)** — native chrome (M3E motion, predictive back, edge-to-edge) but bespoke content surface (custom typography, hero atmospheres, magazine layouts). Visual ceiling: high. Examples: Fitbit redesign, Google Calendar's editorial moments, Niantic apps. > > **3. React Native (New Architecture + Fabric + Hermes)** — real Android views, decent native feel, JavaScript codebase, cross-platform with iOS. Material themable but won't get spring physics or shape morphing without manual work. Examples: Discord mobile, Coinbase, Microsoft Office. > > **4. Flutter** — Skia-painted custom rendering. Cross-platform single codebase. Lags Material updates (no M3 Expressive parity, no real dynamic color). Visual ceiling: high if you ship your own design language; weak if mimicking Material. Examples: Google Pay, BMW My BMW, Toyota. > > **5. Compose Multiplatform (1.8+)** — same Compose code, runs Android + iOS + Desktop + Web (Wasm experimental). Native on Android, Material-look on iOS (you must Cupertino-skin or accept). Best for: Kotlin shop wanting cross-platform from one codebase. > > Which? Or describe priorities (Play Store launch, cross-platform reach, brand vs Material fit) and I'll pick.

If brief gives strong signal (e.g. "Pixel-style camera" → 1; "cross-platform with React team" → 3; "Kotlin shop, ship to all platforms" → 5), state your pick + reasoning in one sentence. If ambiguous, ask.

Step 0b — Once picked, route

| Track | Reference docs | Default stack | |---|---|---| | 1. System-like Compose | `../../references/material3-expressive.md` | Compose BOM 2026.06.00 + Material3 1.4 + adaptive layouts strict | | 2. Branded Compose | Same as 1 | Same as 1 + custom display font + hero atmospheres + bespoke surfaces | | 3. React Native | `../../references/web-fonts.md` + cross-platform docs | RN 0.86 New Architecture + Expo Router | | 4. Flutter | None for native fidelity | Flutter 3+ stable | | 5. Compose Multiplatform | `../../references/material3-expressive.md` | Current stable CMP + shared Compose |

For tracks 3 and 4: web/cross-platform anti-slop rules apply. Read web references.

State the chosen aesthetic direction and track in one sentence at top of response.

Step 0c — UI decision brief

Before code, read:

• `../../references/ui-patterns/surface-taxonomy.md`
• `../../references/ui-patterns/ui-decision-brief.md`
• `../../references/ui-patterns/visual-hierarchy.md`
• `../../references/ui-patterns/motion-budget.md`

Write the UI decision brief and adapt it to the chosen Android track. Compact screens need thumb-reachable primary actions, sheets, edge-to-edge, and adaptive navigation; tablets/foldables need list-detail or supporting panes; operational tools should stay dense and scannable while preserving Material 3 Expressive motion, dynamic color, and predictive back.

Step 1 — Material 3 Expressive default (only if track 1 or 2)

Launched at I/O 2025. Default for Pixel 10 / Android 16 QPR1. Generated UI must adopt:

• **Spring physics on every motion** — `MotionScheme.expressive()`. Never `FastOutSlowIn` on M3E surfaces.
• **Shape morphing** — 35 new shapes (squircle, pill, cookie, clover). Use `MaterialShapes.Cookie4Sided`, `Pill`, etc. Buttons/chips/loaders morph between states.
• **Emphasized typography** — bigger, heavier headlines. Use `MaterialTheme.typography.displayLarge` with intent.
• **New components**:
• `FloatingToolbar` (pill-shaped, drifts with content)
• `ButtonGroup` / `SplitButton`
• `FloatingActionButtonMenu`
• `ContainedLoadingIndicator` (cycles through M3E shapes)
• **Wavy progress** — `LinearWavyProgressIndicator`, `CircularWavyProgressIndicator` with variable amplitude
• Large/Small/XL button sizes
• **Tonal elevation** — surface tone shifts, never `Modifier.shadow()` for elevation
• **Dynamic color (Material You)** — `dynamicColorScheme()` from wallpaper on Android 12+

Read `../../references/material3-expressive.md` for the M3E adoption checklist.

Step 2 — Compose currency (BOM 2026.04.01)

implementation(platform("androi