Summary
The app currently has no adaptive layout support for large screens (tablets, foldables, desktops). Jetpack Compose provides WindowSizeClass and adaptive layout libraries specifically for this. Adding a demo would significantly improve the showcase value of this cookbook.
Description
Android now requires apps targeting large screens to follow large screen quality guidelines. The Compose toolkit provides:
WindowSizeClass (from androidx.compose.material3:material3-window-size-class) — already in Dependencies.kt.
androidx.compose.material3.adaptive — new adaptive navigation and scaffold APIs.
NavigationSuiteScaffold — automatically switches between NavigationBar, NavigationRail, and NavigationDrawer based on window size.
Proposed Demo
A demo screen that shows:
- Adaptive navigation using
NavigationSuiteScaffold — bottom bar on compact, rail on medium, drawer on expanded.
- Two-pane layout using
ListDetailPaneScaffold from androidx.compose.material3.adaptive.layout.
- Sample: a list of items on the left pane, detail view on the right pane when screen is large enough.
Proposed Changes
- Add
androidx.compose.material3:material3-adaptive-navigation-suite to Dependencies.kt.
- Create a new demo module or screen
demos/adaptive/.
- Update
app/build.gradle.kts and navigation to include the adaptive demo.
- Update README to document the new demo.
Acceptance Criteria
References
Summary
The app currently has no adaptive layout support for large screens (tablets, foldables, desktops). Jetpack Compose provides
WindowSizeClassandadaptivelayout libraries specifically for this. Adding a demo would significantly improve the showcase value of this cookbook.Description
Android now requires apps targeting large screens to follow large screen quality guidelines. The Compose toolkit provides:
WindowSizeClass(fromandroidx.compose.material3:material3-window-size-class) — already inDependencies.kt.androidx.compose.material3.adaptive— new adaptive navigation and scaffold APIs.NavigationSuiteScaffold— automatically switches betweenNavigationBar,NavigationRail, andNavigationDrawerbased on window size.Proposed Demo
A demo screen that shows:
NavigationSuiteScaffold— bottom bar on compact, rail on medium, drawer on expanded.ListDetailPaneScaffoldfromandroidx.compose.material3.adaptive.layout.Proposed Changes
androidx.compose.material3:material3-adaptive-navigation-suitetoDependencies.kt.demos/adaptive/.app/build.gradle.ktsand navigation to include the adaptive demo.Acceptance Criteria
NavigationSuiteScaffoldswitches navigation component based onWindowSizeClass.ListDetailPaneScaffoldshows a two-pane layout on tablets.References