Indicate the associated pane should be levitated when certain conditions are met. A levitated pane will be rendered above other panes in the pane scaffold like a pop-up, may or may not cast a scrim to block interaction with the underlying panes.

With the default calculation functions calculateThreePaneScaffoldValue we provide. A pane with a levitate strategy will be adapted to either:

  1. PaneAdaptedValue.Levitated with specified alignment, when the levitated pane is the current destination, and the provided Strategy is Strategy.Always or it's a single-pane layout;

  2. PaneAdaptedValue.Expanded, when the levitated pane is one of the most recent destinations, and the provided Strategy is Strategy.SinglePaneOnly and it's not a single-pane layout; or

  3. PaneAdaptedValue.Hidden otherwise.

import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.Scrim
import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment

val coroutineScope = rememberCoroutineScope()
var navigator: ThreePaneScaffoldNavigator<T>? = null
navigator =
    rememberListDetailPaneScaffoldNavigator<T>(
        adaptStrategies =
            ListDetailPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(
                        strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly,
                        alignment = Alignment.Center,
                        scrim =
                            Scrim(
                                onClick = {
                                    coroutineScope.launch { navigator?.navigateBack() }
                                }
                            )
                    )
            )
    )
return navigator
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.DockedEdge
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.rememberDragToResizeState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator =
    rememberSupportingPaneScaffoldNavigator<NavItemData>(
        adaptStrategies =
            SupportingPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(
                        strategy = AdaptStrategy.Levitate.Strategy.SinglePaneOnly,
                        alignment = Alignment.BottomCenter,
                    )
            )
    )
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane(
            modifier =
                Modifier.preferredWidth(480.dp)
                    .preferredHeight(412.dp)
                    .dragToResize(rememberDragToResizeState(dockedEdge = DockedEdge.Bottom))
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) }
)

Summary

Nested types

The strategy that specifies when the associated pane should be levitated.

Public constructors

Levitate(
    strategy: AdaptStrategy.Levitate.Strategy,
    alignment: Alignment,
    scrim: Scrim?
)
Cmn

Public functions

open operator Boolean
equals(other: Any?)
Cmn
open Int
Cmn
open String
Cmn

Public properties

Alignment

the alignment of the associated pane when it's levitated, relatively to the pane scaffold.

Cmn
Scrim?

the scrim to show when the pane is levitated to block user interaction with the underlying layout and emphasize the levitated pane; by default it will be null and no scrim will show.

Cmn
AdaptStrategy.Levitate.Strategy

the strategy that specifies when the associated pane should be levitated; see Strategy for more detailed descriptions.

Cmn

Inherited functions

From androidx.compose.material3.adaptive.layout.AdaptStrategy
open PaneAdaptedValue

This function is deprecated. This function is deprecated in favor of directly using the info carried by the strategy instances to make adaptation decisions.

Cmn

Public constructors

Levitate

Levitate(
    strategy: AdaptStrategy.Levitate.Strategy = Strategy.Always,
    alignment: Alignment = Alignment.Center,
    scrim: Scrim? = null
)
Parameters
strategy: AdaptStrategy.Levitate.Strategy = Strategy.Always

the strategy that specifies when the associated pane should be levitated; see Strategy for more detailed descriptions.

alignment: Alignment = Alignment.Center

the alignment of the associated pane when it's levitated, relatively to the pane scaffold.

scrim: Scrim? = null

the scrim to show when the pane is levitated to block user interaction with the underlying layout and emphasize the levitated pane; by default it will be null and no scrim will show.

Public functions

equals

open operator fun equals(other: Any?): Boolean

hashCode

open fun hashCode(): Int

toString

open fun toString(): String

Public properties

alignment

val alignmentAlignment

the alignment of the associated pane when it's levitated, relatively to the pane scaffold.

scrim

val scrimScrim?

the scrim to show when the pane is levitated to block user interaction with the underlying layout and emphasize the levitated pane; by default it will be null and no scrim will show.

strategy

val strategyAdaptStrategy.Levitate.Strategy

the strategy that specifies when the associated pane should be levitated; see Strategy for more detailed descriptions.