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

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

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:

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

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)