Compose: Implementing responsive UI for larger screens
summary
Compose for Android builds adaptive layouts by treating window size as input and using concrete tools: Material3-Window-Size-Class converts numerical window metrics to compact/medium/expanded breakpoints; UI fixes include making a column scrollable, weighting images to keep buttons visible, and swapping to a row for expanded widths; layout patterns use Accompanist TwoPane for supporting-panel and list-detail (handles folds/tabletop) and adaptive/staggered grids; components use FlowRow to avoid clipped chips; samples and code are on GitHub.
AI-written summary · about
chapters (6)
- 0:00Introduction to Adaptive UI
- 0:55Application level design
- 4:04Screen level layouts
- 7:37Canonical layout patterns
- 13:34Component level flexibility
- 17:30Conclusion and recap
related talks
18mCompose: Implementing responsive UI for larger screens
26mMaking Apps adaptive with Material and Compose
01h 01mComposing large screens
29mAdapting Android Apps for Multiple Screens Compose-First Approach
33mBuild adaptive apps with Jetpack Compose
35mBuild adaptive apps with Compose's new APIs
35mAdaptive Layouts in Compose
43mBuilding Accessible Apps with Jetpack Compose