List-Detail Layout using Jetpack Compose (Adaptive on all devices)

Grab a coffee ☕, and let’s implement a list-detail layout using Jetpack Compose.

Why is it useful?

This layout is adaptive, so it adapts whether the user is on a tablet or on a phone the layout adjusts automatically.

Dependencies

Open build.gradle.kts from the app module and add these:

plugins {
    id("kotlin-parcelize")
}

dependencies {
    implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-beta04")
    implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-beta04")
    implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-beta04")
}

Implementation

Open MainActivity.kt and let’s start by creating a new composable called ListDetailLayout . Now we need to create a scaffold navigator.

val navigator = rememberListDetailPaneScaffoldNavigator<Any>()

Now we need to create the NavigableListDetailPaneScaffold . Here we need to pass the navigator, listPane and the detailPane. You also have an extraPane parameter which opens next to the detailPane.

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {…