LayoutAndroid

Adaptive list detail scaffold

Arrange application-owned lists and details across phones, tablets, and foldable devices.

Public APILumenAdaptiveListDetailScaffoldAndroid / Compose

Native example

Use Adaptive list detail scaffold

Use as a full-window layout. Material adapts to window size and separating hinges. Save selection and pane state in the host; wire system BackHandler through detailOnly and apply screen content insets outside the scaffold.

Adaptive list detail scaffold rendered in the Android phone emulator Lumen playground — Captured exampleAndroid phone emulator

LumenAdaptiveListDetailScaffold(
    selectedKey = selectedKey, onBack = { selectedKey = null },
    listLabel = "Projects", detailLabel = "Project details",
    listPane = { ProjectList(onSelect = { selectedKey = it }) },
    emptyDetail = { LumenEmptyState("Choose a project") }
) { key, detailOnly ->
    BackHandler(enabled = detailOnly) { selectedKey = null }
    ProjectDetails(key)
}

Reference

Public API

The primary shared and platform-specific options exposed by LumenAdaptiveListDetailScaffold.

API	Values or type	Default	Description
selectedKey / onBack	String? / () -> Unit	Required	Controls selection; null prioritizes the list.
listLabel / detailLabel / backLabel	String	Required / Required / Back	Names panes and compact navigation.
listPane / emptyDetail	@Composable () -> Unit	Required	Provides native lists and wide-window empty detail.
detailPane	@Composable (String, Boolean) -> Unit	Required	Receives the selected key and whether detail is the only visible pane.
modifier	Modifier	Modifier	Applies full-window layout.

Native behavior

Design and accessibility

When to use it

Accessibility

Names both panes and exposes compact back navigation without owning application routing or selection.

Use Adaptive list detail scaffold

Public API

Design and accessibility

When to use it

Accessibility

Help improve Adaptive list detail scaffold (Android / Compose)