top of page

( SPEAKER )
Nav Singh
Senior Mobile Software Engineer at Manulife
( SESSION )
Adaptive UI Made Easy: Building Multi‑Form‑Factor Apps with Compose’s MediaQuery, FlexBox, and Grid
Jetpack Compose’s new experimental MediaQuery API lets you adapt your UI based on real device capabilities—like window size, posture, pointer type, and keyboard—instead of guessing phone vs tablet.
In this beginner‑friendly talk, you’ll learn how to use mediaQuery to detect these capabilities, then combine them with two easy‑to‑learn layout tools: FlexBox and Grid.
You’ll see simple examples of how changing window width or device posture automatically reorganizes cards, columns, and navigation.
By the end, you’ll be able to build adaptive Compose UIs that work well across phones, tablets, foldables, and desktop‑style windows, without over‑complicating your layouts.
Key takeaways
- Understand how MediaQuery replaces fragile form‑factor assumptions with real device capabilities.
- Learn how to use mediaQuery and derivedMediaQuery for window width, posture, pointer, and keyboard in Compose.
- See how FlexBox‑style layouts can automatically wrap, align, and reorder content across form factors.
- See how Grid‑based layouts adapt columns and rows to different window sizes and postures.
- Test different configurations in Compose previews with LocalUiMediaScope.
bottom of page


