Building a list-detail layout in Jetpack Compose

Hey you all, grab a cup of coffee ☕, and let’s see how to create a list-detail layout in a couple of steps.

Setup

Before we write some code let’s add the required dependency in :app/build.gradle.kts .

dependencies {
    implementation("androidx.compose.material3:material3-adaptive:1.0.0-alpha04")
}

Code

Let’s create a class named Car that has an ID. After that, create a companion object that has a val Saver. This will be used by rememberSaveable to save the Car when for example the user rotates the screen.

class Car(val id: Int) {
    companion object {
        val Saver: Saver<Car?, Int> = Saver(
            { it?.id },
            ::Car,
        )
    }
}

Now go to MainActivity.kt and create a new variable that holds the selected car value.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        AppTheme {
            var selectedCar: Car? by rememberSaveable(stateSaver = Car.Saver) {
                mutableStateOf(null)
            }
        }
    }
}

To know when to show the details screen we need to use rememberListDetailPaneScaffoldNavigator .

val navigator = rememberListDetailPaneScaffoldNavigator()

This will be passed to ListDetailPaneScaffold . This knows if the screen can display the details screen on the same screen or to directly navigate to it.

Before implementing the ListDetailPaneScaffold we need to create two composables one that displays the car list and one that displays the car details.

@Composable
fun CarList(
    onClick: (Car) -> Unit
) {
    LazyColumn {
        items(10) {
            Text(
                text = "Car number $it",
                modifier = Modifier
                    .clickable { onClick(Car(it)) }
                    .padding(10.dp)
            )
        }
    }
}

@Composable
fun CarDetails(car: Car) {
    Text(text = "The car number is ${car.id}")
}

Now let’s implement the ListDetailPaneScaffold by passing the scaffold state and the screens.

ListDetailPaneScaffold(…