Foldable, Meet Compose
summary
Jetpack Compose integrates with foldable and large screens by shipping a hinge-aware UI component TwoPaneLayout, a window-info wrapper WindowState (built on Jetpack Window Manager) and a Compose test kit; the libraries are on Maven Central and GitHub. TwoPaneLayout lays out two panes around a physical hinge (66px on Surface Duo 2, 84px on Duo 1, 1px on a Galaxy Fold), supports pane weights and pin modes, auto-switches navigation rail vs bottom bar, and testing simulates folding features and span/unspan gestures.
AI-written summary · about
chapters (12)
- 0:00Introduction and love story setup
- 2:11Foldable devices and design patterns
- 5:04Compose introduction and first date
- 6:31Two pane layout introduction
- 8:42Device postures and hinge awareness
- 13:24Navigation in two pane layout
- 14:52Window state library overview
- 17:16Window state in action
- 20:52Enhanced app with both libraries
- 21:54Navigation rail for large screens
- 24:00Testing on foldable devices
- 27:36Key takeaways and resources
related talks
01h 01mComposing large screens
33mIntroduction to dual-screen and foldables development
01h 21mEnhance your single screen designed-app to make it shine on foldable devices
35mDesigning for foldables in 2023
33mBuild adaptive apps with Jetpack Compose
18mCompose: Implementing responsive UI for larger screens
26mMaking Apps adaptive with Material and Compose
39mFinding Success on Large Screens and Foldables