UI Layer Architecture for Adaptive Apps
summary
Architecture shows a concrete recipe: hoist navigation into an app state modeled as a multi‑tree multistack, flatten to a backstack for Navigation 3, and map nav entries to primary/secondary/tertiary panes so UI scales from one to five panes with no per‑pane rewrite. Uses Compose Multiplatform, shared element transitions, animated visibility and a movable navigation bar; scaffoldState coordinates pane‑specific enter/exit, predictive back, and duplicated backstack entries. Demo runs on phone, foldable, iPhone simulator and desktop.
AI-written summary · about
chapters (15)
- 0:00Adaptive UI architecture intro
- 1:05Shared element transitions demo
- 3:14Panes and navigation pain points
- 7:10Navigation state as multi-tree
- 12:07State to back stack conversion
- 14:37Persistent UI per pane
- 19:48Scaffold state for control
- 23:44Animated visibility for UI
- 26:53Shared transitions across panes
- 30:02iPhone demo with Compose Multiplatform
- 30:24Foldable Android demo
- 32:08Desktop demo with Compose
- 33:35Scaling to multiple panes
- 34:59Recap and Navigation 3
- 36:43Q&A
related talks
38mWhy is Adaptive Layout a Nightmare?
38mArchitecture Agnostic UI Development
42mWhy is adaptive layout a nightmare?
33mNavigation superpowers at your fingertips
28mNavigation in a Multiplatform World
33mBuild adaptive apps with Jetpack Compose
45mImplementing Modern Android Architecture
26mMaking Apps adaptive with Material and Compose