Build Custom Design Systems with Jetpack Compose's New Styles API
summary
Styles API in Jetpack Compose (experimental in Compose Foundation 1.12) replaces many per-component visual parameters with a single style parameter that supports reusable, mergeable properties, state blocks (pressed/hovered/focused), and built-in animations via an animate lambda. Example: JetSnack shows a gradient button composed by merging base and gradient styles instead of modifier hacks. Benchmarks claim 70% fewer allocations and 2.3x faster to next pixel. Use styles for theme-level visual overrides; keep modifiers for behaviors and additive layout.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 4:17Design systems on Android
- 7:49Styles API overview
- 9:56Custom styleable components
- 12:00Style fundamentals
- 16:36Interaction states
- 18:46Animating style transitions
- 20:34Performance benefits
- 20:55Styles vs modifiers
- 22:43Feedback and resources
related talks
41mCompose by Example
49mImplement your own design system with Jetpack Compose
41mDeep Dive into New Jetpack Compose APIs: FlexBox, Grid, Styles, Adaptive UI with mediaQuery
38mDesigning scalable Compose APIs
15mBuild beautiful Material Design apps with Jetpack Compose
01h 09mJetpack Compose for consistency of your apps' UI
36mPractical implementations of powerful UI expressions using Jetpack Compose
26mCompose Beyond Material Design