Layout
Window size classes decide which navigation and how many panes a screen shows.
- Interactive page: https://m3e.ljzapps.app/#foundations/layout
Window size classes decide which navigation and how many panes a screen shows.
| Class | Width | Navigation | Panes |
|---|---|---|---|
| Compact | 0 to 599 dp | Navigation bar | One |
| Medium | 600 to 839 dp | Navigation rail | One or two |
| Expanded | 840 to 1199 dp | Rail or drawer | Two |
| Large | 1200 to 1599 dp | Navigation drawer | Two or three |
| Extra large | 1600 dp and up | Navigation drawer | Three |
Canonical layouts: list-detail, supporting pane and feed. Constrain reading width to 840 to 1040 dp on large windows.
val sizeClass = currentWindowAdaptiveInfo().windowSizeClass
val expanded = sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND)