Mastering Jetpack Compose Previews - Test your UI before it tests you!
summary
Live demo of Jetpack Compose Previews shows concrete techniques: add the tooling dependency, create multiple previews for specific DP sizes and devices, use live edit and dynamic wallpaper colors, run interactive previews and animation frame-by-frame, and generate arrays of previews for font scaling (100%–200%). Uses PreviewParameterProvider to inject realistic UI state because previews don’t load network or ViewModel data; multiple-previews require Compose 1.6.0-alpha01 and Android Studio Hedgehog. Limitations and workarounds are demonstrated.
AI-written summary · about
chapters (23)
- 0:00Jetpack Compose Previews intro
- 1:07Preview annotations setup
- 2:31Preview names
- 3:13UI testing dimensions
- 4:18Previews on Android devices
- 5:02Tablet responsiveness
- 5:44Font scaling accessibility
- 6:49Localization testing
- 7:09Previews with system UI
- 8:11Light/dark mode colors
- 8:55Live Edit dynamic colors
- 10:01Wallpaper dynamic colors
- 11:03Real device previews
- 12:26Interactive UI in previews
- 13:52Interactive components testing
- 14:34Animations fine-tuning
- 17:23Multiple previews font scaling
- 19:12Screen size previews
- 20:59Preview parameter providers
- 23:31Navigating composables
- 27:28Previews limitations
- 28:52ViewModels in previews
- 29:38Q&A
related talks
19mLet's Preview！ Jetpack Compose
43mPreview Driven Development
38mPractical Tips and Tricks to Improve Your Compose Previews
33mPractical Tips and Tricks to Improve Your Compose Previews
01h 05mLet's build Android UI with Jetpack Compose
40mUnderstand the mechanism! Screenshot-testing Compose previews in many variations
48mLearning Jetpack Compose By Example
36mHow the developer community is shaping Jetpack Compose