Android Mobile App Screen Design (Material Design)
Material Design 3 (Material You) system is not just a component set. It's a color system with dynamic tones, 15-style typography scale, standardized component states and screen adaptation rules. Designing Android screens without understanding these rules means creating layouts that look foreign on device and developers can't implement with standard Jetpack Compose tools.
M3 Color System and Dynamic Color
Material Design 3 builds around color roles — not concrete color values but semantic slots: primary, onPrimary, primaryContainer, onPrimaryContainer, and across 29 roles total. Designer sets Source Color, HCT algorithm (Hue, Chroma, Tone) auto-generates full palette.
Dynamic Color (Android 12+) — system generates palette from wallpaper. On Samsung, Google Pixel and other flagships users expect app to adapt to their theme. Layouts ignoring this — with hardcoded HEX values instead of color roles — look foreign on Pixel 8.
For design use Material Theme Builder plugin in Figma: import Brand Color → get full M3 palette → export as Color.kt for developer. Removes manual color translation and excludes errors.
Typography and grid
M3 defines 15 text styles in 5 groups: Display, Headline, Title, Body, Label. Sizes — not arbitrary: Display Large = 57sp, Body Medium = 14sp. Using sp instead of dp for text — not optional, it's requirement for correct scaling on system font size change (accessibility).
Base grid — 4dp. All padding, component sizes, border radius — multiples of 4. 12dp padding instead of 16dp — error developer fixes via padding(12.dp), but on high-density devices visual difference is noticeable.
Components and their states
Each M3 component has 5 states: enabled, hovered, focused, pressed, disabled. In Jetpack Compose this StateLayer with fixed opacity: pressed = 12% overlay, focused = 12%, hovered = 8%, disabled = 38% content opacity. Layout without drawn states — unfinished layout. Developer gets only "enabled" and starts guessing the rest.
Critical components to design:
| Component | M3 Variants |
|---|---|
| Button | Filled, Filled Tonal, Outlined, Text, Elevated |
| Card | Filled, Outlined, Elevated |
| TextField | Filled, Outlined |
| NavigationBar | Bottom navigation (up to 5 items) |
| NavigationRail | Sidebar (tablets, landscape) |
| TopAppBar | CenterAligned, Small, Medium, Large |
Variant choice — not aesthetics but semantics. Filled Button — primary action, max one per screen. Text Button — secondary. Using two Filled Buttons side by side — hierarchy violation.
Screen size adaptation
Android devices — phones (compact width), foldables (medium), tablets (expanded). M3 defines Canonical Layouts for each class: List-Detail for expanded, Supporting Panel for medium. Designing only for compact — half the work.
Minimum set: design for compact (360–599dp) and expanded (840dp+). Medium (600–839dp) — intermediate, often inherits from one of two.
What work includes
- Color system setup via Material Theme Builder (all 29 roles, light/dark theme)
- M3-standard typography scale
- All screen design in Figma with component states
- Adaptation for compact and expanded breakpoints
- Developer annotations: spacing tokens, color roles (not HEX), component specs
- Color and typography export in format ready for Compose import
Timeline
3–5 days depending on screen count. One screen with full state set and two breakpoints — about 0.5–1 day. Cost calculated individually after analyzing requirements and unique screen count.