Build adaptive apps with Compose's new APIs
summary
Three new Compose foundation APIs land as practical building blocks: MediaQuery exposes window posture (flat, tabletop, book), window width/height (use derivedMediaQuery to debounce frequent updates), mic/camera booleans, pointer precision, keyboard kind and viewing distance. FlexBox lays out one-directional containers, forbids lazy children, supports flex grow/shrink (0.0–1.0), wrapping and a grow modifier used to make a collapsing two-button/one-button responsive bar. Grid API is non-lazy, 1-indexed, supports fixed/percent/FR tracks, spans and named areas; the sample app adapts correctly with just a few config changes.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 0:30Media Query API
- 1:45Media Query capabilities
- 5:12Media Query example
- 9:27FlexBox API
- 10:37FlexBox layout and sizing
- 14:51FlexBox code example
- 17:17Adaptive UI with FlexBox
- 20:30List detail and supporting pane
- 21:31Grid API
- 24:00Grid configuration
- 31:24Grid layout example
- 34:32What you should know
related talks
35mBuild adaptive apps with Compose's new APIs
41mDeep Dive into New Jetpack Compose APIs: FlexBox, Grid, Styles, Adaptive UI with mediaQuery
18mCompose: Implementing responsive UI for larger screens- 18mCompose: Implementing responsive UI for larger screens
26mMaking Apps adaptive with Material and Compose
35mAdaptive Layouts in Compose
01h 01mComposing large screens
35mCompose beyond Material