AdaptiveLayoutNav3

Navigation 3 + Material 3 Adaptive Layouts

A sample Android project showing how Navigation 3 and Material 3 Adaptive work together to build adaptive multi-pane layouts.

What This Project Covers

#	Pattern	Description
0	NavigationSuiteScaffold	Adaptive top-level nav: BottomBar → Rail → Drawer
1	ListDetailPaneScaffold	List + Detail + Extra pane (3-pane layout)
2	SupportingPaneScaffold	Main content + supporting pane (video + comments)

Key Concepts

How Nav3 connects to adaptive layouts

1. NavKey — serializable destination identifier
2. entry<T> — declares content + metadata (pane role) for a destination
3. NavDisplay — renders entries using a SceneStrategy chain
4. SceneStrategy — reads metadata to decide layout (single/multi pane)
5. then — chains strategies; first match wins

Metadata Pattern

Entries declare their pane role via metadata — the entry doesn't know whether it will be shown in single-pane or multi-pane mode:

entry<ListKey>(metadata = listPane()) { ListScreen() }
entry<DetailKey>(metadata = detailPane()) { key -> DetailScreen(key.itemId) }
entry<VideoKey>(metadata = mainPane()) { VideoScreen() }
entry<CommentsKey>(metadata = supportingPane()) { CommentsScreen() }

SceneStrategy Chain

NavDisplay(
    sceneStrategy = rememberListDetailSceneStrategy<NavKey>()
        then rememberSupportingPaneSceneStrategy<NavKey>(),
)

First strategy that recognizes the metadata wins. Entries without matching metadata fall through to single-pane.

Project Structure

app/src/main/java/com/tbahlai/foldsamplenav3/
├── MainActivity.kt          ← NavigationSuiteScaffold + NavDisplay + entryProvider
├── nav/
│   ├── NavKeys.kt           ← All navigation keys (Serializable)
│   ├── NavigationState.kt   ← Back stack management with sub-stacks
│   └── Navigator.kt         ← Navigation actions (navigate, goBack)
└── screens/
    ├── HomeScreen.kt        ← Entry point with example links
    ├── SearchScreen.kt      ← Top-level destination
    ├── ProfileScreen.kt     ← Top-level destination
    ├── ListScreen.kt        ← ListDetail: list pane
    ├── DetailScreen.kt      ← ListDetail: detail pane
    ├── ExtraInfoScreen.kt   ← ListDetail: extra pane
    ├── VideoScreen.kt       ← SupportingPane: main pane
    └── CommentsScreen.kt    ← SupportingPane: supporting pane

How to Test

1. Use a resizable emulator (e.g. Pixel Fold, 7.6" Foldable)
2. Resize the window to see:
   • Navigation switching between BottomBar / Rail / Drawer
   • ListDetail switching between stacked and side-by-side
   • SupportingPane showing comments inline or as separate screen

Building

./gradlew assembleDebug

Requires:

• Android Studio Ladybug or newer
• Kotlin 2.1.20+
• compileSdk 36
• minSdk 26