We just launched Compose Examples featuring over 150+ components! Check it out →

edgeSwipeToDismiss

Android

Modifier in Wear Material Compose

Limits swipe to dismiss to be active from the edge of the viewport only. Used when the center of the screen needs to be able to handle horizontal paging, such as 2-d scrolling a Map or swiping horizontally between pages. Swipe to the right is intercepted on the left part of the viewport with width specified by [edgeWidth], with other touch events ignored - vertical scroll, click, long click, etc.

Currently Edge swipe, like swipe to dismiss, is only supported on the left part of the viewport regardless of layout direction as content is swiped away from left to right.

Requires that the element to which this modifier is applied exists within a SwipeToDismissBox which is using the same [SwipeToDismissBoxState] instance.

Example of a modifier usage with SwipeToDismiss

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.5.0-alpha04")
}

Overloads

@Suppress("DEPRECATION")
@Deprecated(
    "SwipeToDismiss has been migrated to androidx.wear.compose.foundation. " +
        "Please import Modifier.edgeSwipeToDismiss from androidx.wear.compose.foundation instead.",
    replaceWith =
        ReplaceWith(
            "androidx.wear.compose.foundation.edgeSwipeToDismiss(",
            "swipeToDismissBoxState, edgeWidth)"
        )
)
fun Modifier.edgeSwipeToDismiss(
    swipeToDismissBoxState: SwipeToDismissBoxState,
    edgeWidth: Dp = SwipeToDismissBoxDefaults.EdgeWidth
): Modifier

Parameters

namedescription
swipeToDismissBoxStateA state of SwipeToDismissBox. Used to trigger swipe gestures on SwipeToDismissBox
edgeWidthA width of edge, where swipe should be recognised

Code Example

EdgeSwipeForSwipeToDismiss

@Composable
fun EdgeSwipeForSwipeToDismiss(navigateBack: () -> Unit) {
    val state = rememberSwipeToDismissBoxState()

    // When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
    // modifier applies exists within a SwipeToDismissBox which shares the same state.
    SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
        val horizontalScrollState = rememberScrollState(0)
        if (isBackground) {
            Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
        } else {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(
                    modifier =
                        Modifier.align(Alignment.Center)
                            .edgeSwipeToDismiss(state)
                            .horizontalScroll(horizontalScrollState),
                    text =
                        "This text can be scrolled horizontally - to dismiss, swipe " +
                            "right from the left edge of the screen (called Edge Swiping)",
                )
            }
        }
    }
}
by @alexstyl