Build adaptive apps with Compose's new APIs
summary
Explains how Jetpack Compose’s new MediaQuery plus FlexBox and Grid APIs let adaptive UIs change layout and behavior based on real device capabilities: MediaQuery exposes window posture (flat, tabletop, book), window width/height, mic/camera booleans, pointer and keyboard precision, and viewing distance and recommends derivedMediaQuery for frequent width/height updates; FlexBox is non-lazy, supports grow/shrink (0..1), wrap and gaps and can make a button take remaining space; Grid is non-lazy, one‑indexed, supports fixed/percent/FR tracks, spanning and named areas. A sample two‑pane supporting‑pane UI and responsive grid are implemented and work live in the demo.
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
26mMaking Apps adaptive with Material and Compose- 18mCompose: Implementing responsive UI for larger screens
31mDesigning Media Friendly Jetpack Compose Components
33mBuild adaptive apps with Jetpack Compose
01h 01mComposing large screens