| name | platform-android |
| description | Android platform design rules — screen dimensions, Material Design 3, Roboto typography, navigation patterns. Use when: Android/Material + design/screen/app, or when creating Android-specific Figma designs. |
Platform Android — Material Design 3
Platform-specific design rules for Android apps in Figma. Covers screen dimensions, Material Design 3 conventions, Roboto typography, navigation patterns, and component specs. Extends ui-ux-fundamentals with Android-specific constraints.
Extends UI/UX Fundamentals (loaded separately).
Scope: Android platform conventions only.
General design quality rules are in ui-ux-fundamentals.
Skill Boundaries
- Use this skill for Android-specific design decisions (Material 3, navigation bar, Roboto).
- If the task is iOS-specific, switch to platform-ios.
- If the task is responsive web design, switch to responsive-design.
- If the task is creating UI, switch to figma-create-ui and reference this skill for Android rules.
Design Direction
Design rules are delivered by _workflow.designPreflight (from get_mode). For detailed rules by category, call get_design_guidelines(category).
Screen Dimensions
| Device | Width | Height | Density |
|---|
| Standard Android (default) | 412px | 915px | xxhdpi (3×) |
| Small phone | 360px | 800px | xhdpi (2×) |
| Large phone | 412px | 915px | xxhdpi (3×) |
| Tablet 10" | 800px | 1280px | xhdpi (2×) |
| Foldable (unfolded) | 840px | 900px | xxhdpi (3×) |
Default for new Android designs: 412 × 915 (project standard, matches lint rule mobile-dimensions).
System UI
┌──────────────────────────┐
│ Status Bar (24dp) │
├──────────────────────────┤
│ │
│ Safe Content Area │ ← paddingLeft/Right: 16dp
│ │
│ │
├──────────────────────────┤
│ Navigation Bar (48-80dp) │ ← 3-button, gesture, or nav bar
└──────────────────────────┘
Rules:
- Status bar: 24dp height
- Navigation bar: 48dp (gesture navigation) or 80dp (3-button navigation)
- System bar frames should be full-bleed:
paddingLeft: 0, paddingRight: 0, paddingTop: 0 on the screen root so the status bar sits flush at the top edge
- Content padding: 16dp horizontal minimum
- Edge-to-edge: content draws behind system bars with appropriate insets
- Figma implementation: safe areas MUST be visible transparent frames with
layoutMode: "HORIZONTAL" (no fill, no stroke), NOT padding or hidden elements
- Status Bar:
{ type: 'frame', name: 'Status Bar', layoutMode: 'HORIZONTAL', height: 24 } as first child of screen
- Navigation Bar:
{ type: 'frame', name: 'Navigation Bar', layoutMode: 'HORIZONTAL', height: 48 } (gesture) or 80 (3-button) as last child of screen
- NEVER use
visible: false on safe area frames — they must remain visible to preserve spacing
- NEVER use paddingTop/paddingBottom as substitute for safe area frames
Typography — Roboto / Material Type Scale
| Role | Font | Size | Weight | Line Height | Tracking |
|---|
| Display Large | Roboto | 57dp | Regular | 64dp | -0.25 |
| Display Medium | Roboto | 45dp | Regular | 52dp | 0 |
| Display Small | Roboto | 36dp | Regular | 44dp | 0 |
| Headline Large | Roboto | 32dp | Regular | 40dp | 0 |
| Headline Medium | Roboto | 28dp | Regular | 36dp | 0 |
| Headline Small | Roboto | 24dp | Regular | 32dp | 0 |
| Title Large | Roboto | 22dp | Regular | 28dp | 0 |
| Title Medium | Roboto | 16dp | Medium | 24dp | 0.15 |
| Title Small | Roboto | 14dp | Medium | 20dp | 0.1 |
| Body Large | Roboto | 16dp | Regular | 24dp | 0.5 |
| Body Medium | Roboto | 14dp | Regular | 20dp | 0.25 |
| Body Small | Roboto | 12dp | Regular | 16dp | 0.4 |
| Label Large | Roboto | 14dp | Medium | 20dp | 0.1 |
| Label Medium | Roboto | 12dp | Medium | 16dp | 0.5 |
| Label Small | Roboto | 11dp | Medium | 16dp | 0.5 |
Rules:
- Font is auto-detected by the tool layer: Roboto for Latin text, Noto Sans SC for Chinese, Noto Sans JP for Japanese, Noto Sans KR for Korean. No need to pass
fontFamily explicitly — just use the correct screen dimensions (412×915) and the tool handles it.
- If Roboto unavailable, the tool falls back to Inter automatically.
- Material 3 uses 5 categories × 3 sizes = 15 type roles
Typography — Noto Sans SC (Chinese)
When UI language is Chinese, font is auto-detected to Noto Sans SC. Use this adjusted type scale:
| Role | Font | Size | Weight | Line Height | Tracking |
|---|
| Display Large | Noto Sans SC | 57dp | Regular | 80dp (1.4) | -0.25 |
| Headline Large | Noto Sans SC | 32dp | Regular | 48dp (1.5) | 0 |
| Headline Medium | Noto Sans SC | 28dp | Regular | 42dp (1.5) | 0 |
| Title Large | Noto Sans SC | 22dp | Medium | 34dp (1.55) | 0 |
| Title Medium | Noto Sans SC | 16dp | Medium | 26dp (1.63) | 0 |
| Body Large | Noto Sans SC | 16dp | Regular | 26dp (1.63) | 0 |
| Body Medium | Noto Sans SC | 14dp | Regular | 24dp (1.71) | 0 |
| Body Small | Noto Sans SC | 12dp | Regular | 20dp (1.67) | 0 |
| Label Large | Noto Sans SC | 14dp | Medium | 22dp (1.57) | 0 |
CJK-specific rules:
- CJK body line-height: 1.6–1.8 (wider than Latin 1.2–1.4) — complex strokes need vertical breathing room
- CJK heading line-height can tighten to 1.4–1.5 (titles are short)
- Minimum body size: 14dp (12dp for captions only)
- NEVER add positive letter-spacing to CJK body text (CJK has built-in character spacing)
- Tracking values from Latin Roboto scale do NOT apply to CJK — use 0 for all CJK text
Touch Targets
- MUST minimum 48 × 48dp for all interactive elements
- Visual element can be smaller, but touch area must be ≥ 48dp
- SHOULD 56dp height for prominent buttons (FAB, extended FAB)
Navigation Patterns
Top App Bar
Top App Bar (HORIZONTAL, height: 64dp, padding: 0 16dp)
├── Navigation Icon (menu or back arrow, 24dp icon in 48dp target)
├── Title (left-aligned, Title Large 22dp)
└── Action Icons (24dp icons, 48dp targets, max 3)
- Medium top app bar: 112dp height, title below
- Large top app bar: 152dp height, large title
Navigation Bar (Bottom)
Navigation Bar (HORIZONTAL, height: 80dp, SPACE_BETWEEN)
├── Nav Item (icon 24dp + label 12dp, VERTICAL, CENTER)
│ └── Active: filled icon + indicator pill (64×32dp, radius 16dp)
├── Nav Item
├── Nav Item
└── Nav Item
- 3–5 destinations
- Active indicator: pill shape 64 × 32dp, corner radius 16dp
- Active: filled icon + tinted indicator
- Inactive: outline icon, no indicator
Navigation Drawer
- Width: 360dp max (or 80% of screen width)
- Header: 56dp height
- Item height: 56dp, padding 12dp 28dp, corner radius 28dp (right side)
- Active item: filled container with tint
Navigation Rail (Tablet/Foldable)
- Width: 80dp
- Item: icon 24dp + label 12dp, 56dp vertical spacing
- Active indicator: same pill as bottom nav
Material 3 Components
| Component | Key Specs |
|---|
| FAB | 56 × 56dp, corner radius 16dp |
| Small FAB | 40 × 40dp, corner radius 12dp |
| Large FAB | 96 × 96dp, corner radius 28dp |
| Extended FAB | height 56dp, corner radius 16dp, padding 0 16dp |
| Filled button | height 40dp, corner radius 20dp (full), padding 0 24dp |
| Outlined button | height 40dp, corner radius 20dp, stroke 1dp |
| Text button | height 40dp, corner radius 20dp, padding 0 12dp |
| Card (filled) | corner radius 12dp, padding 16dp |
| Card (elevated) | corner radius 12dp, elevation 1dp, padding 16dp |
| Chip | height 32dp, corner radius 8dp, padding 0 16dp |
| Switch | 52 × 32dp, thumb 24dp |
| Checkbox | 18 × 18dp in 48dp target, corner radius 2dp |
| Text field (filled) | height 56dp, corner radius 4dp top, no bottom radius |
| Text field (outlined) | height 56dp, corner radius 4dp, stroke 1dp |
| Bottom sheet | corner radius 28dp top |
| Dialog | width 280–560dp, corner radius 28dp, padding 24dp |
| Snackbar | height 48dp, corner radius 4dp, padding 0 16dp |
Material 3 Elevation & Color
- Elevation uses tonal color overlay, not drop shadows
- Surface tint: primary color at low opacity layered on surface
- 5 elevation levels: 0dp, 1dp, 3dp, 6dp, 8dp
- SHOULD use Material 3 dynamic color scheme (primary, secondary, tertiary, error + containers)
Android-Specific Rules
- MUST use Material Symbols for icons (outlined weight 400 default)
- MUST respect 48dp minimum touch targets (visual element can be smaller)
- SHOULD use Material 3 shape system (corner radius varies by component size)
- SHOULD use edge-to-edge layout (content behind system bars)
- NEVER use iOS-style back chevron — Android uses arrow_back (←)
- NEVER use iOS-style segmented control — Android uses tabs or chips
- NEVER place navigation at the top only — Android uses bottom navigation bar for primary destinations
- SHOULD use predictive back gesture affordance (page peek animation)
