# AdaptStrategy.Levitate

Artifact: [androidx.compose.material3.adaptive:adaptive-layout](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/adaptive/layout/AdaptStrategy.kt+class:androidx.compose.material3.adaptive.layout.AdaptStrategy.Levitate) Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0) Common/All
- Cmn

  ```
  class AdaptStrategy.Levitate : AdaptStrategy
  ```

*** ** * ** ***

Indicate the associated pane should be levitated when it's the current destination.

A levitated pane will be rendered above other panes in the pane scaffold like a pop-up or a sheet (for example, as a bottom sheet or a side sheet.) A `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#(androidx.compose.ui.Alignment,kotlin.Function0,androidx.compose.material3.adaptive.layout.DragToResizeState)` can be provided to block interaction with the underlying panes.

With the default `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#calculateThreePaneScaffoldValue(kotlin.Int,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldAdaptStrategies,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldDestinationItem,kotlin.Int)` we provide, a pane with a levitate strategy will be adapted to either:

1. `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue.Levitated` with specified `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#(androidx.compose.ui.Alignment,kotlin.Function0,androidx.compose.material3.adaptive.layout.DragToResizeState)`, when the levitated pane is the current destination; or

2. `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue#Hidden()` otherwise.

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.DockedEdge
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
import androidx.compose.material3.adaptive.layout.rememberDragToResizeState
import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment

val scaffoldDirective = calculatePaneScaffoldDirective(currentWindowAdaptiveInfoV2())
val dragToResizeState = rememberDragToResizeState(dockedEdge = DockedEdge.Bottom)
val navigator: ThreePaneScaffoldNavigator<T> =
    rememberSupportingPaneScaffoldNavigator<T>(
        scaffoldDirective = scaffoldDirective,
        adaptStrategies =
            SupportingPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(
                            alignment = Alignment.BottomCenter,
                            dragToResizeState = dragToResizeState,
                        )
                        .onlyIfSinglePane(scaffoldDirective)
            ),
    )
return navigator
```

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.LevitatedPaneScrim
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
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
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics

val coroutineScope = rememberCoroutineScope()
val scaffoldDirective = calculatePaneScaffoldDirective(currentWindowAdaptiveInfoV2())
var navigator: ThreePaneScaffoldNavigator<T>? = null
val onClick: () -> Unit = { coroutineScope.launch { navigator?.navigateBack() } }
navigator =
    rememberListDetailPaneScaffoldNavigator<T>(
        scaffoldDirective = scaffoldDirective,
        adaptStrategies =
            SupportingPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(
                            alignment = Alignment.Center,
                            scrim = {
                                LevitatedPaneScrim(
                                    Modifier.semantics {
                                        contentDescription = "Scrim"
                                        this.onClick("Dismiss the extra pane") {
                                            onClick()
                                            true
                                        }
                                    },
                                    onClick = onClick,
                                )
                            },
                        )
                        .onlyIfSinglePane(scaffoldDirective)
            ),
    )
return navigator
```

```kotlin
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsDialogSample<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane(shape = RoundedCornerShape(16.dp)) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
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.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
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(1f)
                    .preferredHeight(0.5f)
                    .background(MaterialTheme.colorScheme.surface),
            dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#onlyIf(kotlin.Boolean)` | and `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#onlyIfSinglePane(androidx.compose.material3.adaptive.layout.PaneScaffoldDirective)` for finer control over when the pane should be levitated. |

## Summary

| ### Public constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#Levitate(androidx.compose.ui.Alignment,kotlin.Function0,androidx.compose.material3.adaptive.layout.DragToResizeState)( alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, scrim: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, dragToResizeState: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState? )` | Cmn |

| ### Public functions |
|---|---|---|
| `open operator https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#equals(kotlin.Any)(other: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?)` | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#hashCode()()` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#onlyIf(kotlin.Boolean)(condition: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` This is a convenient function to only levitate the associated pane when the provided condition is met. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#onlyIfSinglePane(androidx.compose.material3.adaptive.layout.PaneScaffoldDirective)(scaffoldDirective: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective)` This is a convenient function to only levitate the associated pane when it's a single-pane layout. | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#toString()()` | Cmn |

### Inherited functions

From [androidx.compose.material3.adaptive.layout.AdaptStrategy](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy) `open https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue` `[adapt](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy#adapt())()`

**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

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.3.0)

```
Levitate(
    alignment: Alignment = Alignment.Center,
    scrim: (@Composable () -> Unit)? = null,
    dragToResizeState: DragToResizeState? = null
)
```

| Parameters |
|---|---|
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | the alignment of the associated pane when it's levitated, relatively to the pane scaffold. |
| `scrim: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = 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; to display a scrim, we recommend to use `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/LevitatedPaneScrim.composable#LevitatedPaneScrim(androidx.compose.ui.Modifier,kotlin.Function0,androidx.compose.ui.graphics.Color)` as a default implementation. |
| `dragToResizeState: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState? = null` | the optional state to enable the levitated pane to be resizable by dragging; it will be used to store and control current dragging; see `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/rememberDragToResizeState.composable#rememberDragToResizeState(androidx.compose.material3.adaptive.layout.DockedEdge,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for more details about how to implement the drag-to-resize behavior. |

## Public functions

### equals

Cmn

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

### hashCode

Cmn

```
open fun hashCode(): Int
```

### onlyIf

Cmn Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
@Composable
fun onlyIf(condition: Boolean): AdaptStrategy
```

This is a convenient function to only levitate the associated pane when the provided condition is met. If the condition is not met, the pane will be expanded instead, if there's enough room; otherwise it will be hidden.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Levitate#onlyIfSinglePane(androidx.compose.material3.adaptive.layout.PaneScaffoldDirective)` |   |

### onlyIfSinglePane

Cmn Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
@Composable
fun onlyIfSinglePane(scaffoldDirective: PaneScaffoldDirective): AdaptStrategy
```

This is a convenient function to only levitate the associated pane when it's a single-pane layout. On multi-pane layouts, the pane will be expanded instead, if it's one of the recent destinations.

### toString

Cmn

```
open fun toString(): String
```