SwipeToRevealCard

Functions summary

Unit

@ExperimentalWearMaterialApi
@Composable
SwipeToRevealCard(
    primaryAction: @Composable () -> Unit,
    revealState: RevealState,
    onFullSwipe: () -> Unit,
    modifier: Modifier,
    secondaryAction: (@Composable () -> Unit)?,
    undoPrimaryAction: (@Composable () -> Unit)?,
    undoSecondaryAction: (@Composable () -> Unit)?,
    colors: SwipeToRevealActionColors,
    shape: Shape,
    content: @Composable () -> Unit
)

SwipeToReveal Material composable for Cards.

Functions

SwipeToRevealCard

Artifact: androidx.wear.compose:compose-material

View Source

Added in 1.5.0

@ExperimentalWearMaterialApi
@Composable
fun SwipeToRevealCard(
    primaryAction: @Composable () -> Unit,
    revealState: RevealState,
    onFullSwipe: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryAction: (@Composable () -> Unit)? = null,
    undoPrimaryAction: (@Composable () -> Unit)? = null,
    undoSecondaryAction: (@Composable () -> Unit)? = null,
    colors: SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors(),
    shape: Shape = SwipeToRevealDefaults.CardActionShape,
    content: @Composable () -> Unit
): Unit

SwipeToReveal Material composable for Cards. This adds the option to configure up to two additional actions on the Card: a mandatory primaryAction and an optional secondaryAction. These actions are initially hidden and revealed only when the content is swiped. These additional actions can be triggered by clicking on them after they are revealed. It is recommended to trigger primaryAction on full swipe of the content.

For actions like "Delete", consider adding undoPrimaryAction (displayed when the primaryAction is activated) and/or undoSecondaryAction (displayed when the secondaryAction is activated). Adding undo composables allow users to undo the action that they just performed.

Example of SwipeToRevealCard with primary and secondary actions

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.material.AppCard
import androidx.wear.compose.material.CardDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.SwipeToRevealCard
import androidx.wear.compose.material.SwipeToRevealDefaults
import androidx.wear.compose.material.SwipeToRevealPrimaryAction
import androidx.wear.compose.material.SwipeToRevealSecondaryAction
import androidx.wear.compose.material.SwipeToRevealUndoAction
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberRevealState

val revealState = rememberRevealState()
SwipeToRevealCard(
    revealState = revealState,
    modifier =
        Modifier.fillMaxWidth()
            // Use edgeSwipeToDismiss to allow SwipeToDismissBox to capture swipe events
            .edgeSwipeToDismiss(swipeToDismissBoxState),
    primaryAction = {
        SwipeToRevealPrimaryAction(
            revealState = revealState,
            icon = { Icon(SwipeToRevealDefaults.Delete, "Delete") },
            label = { Text("Delete") },
            onClick = { /* Add the click handler here */ },
        )
    },
    secondaryAction = {
        SwipeToRevealSecondaryAction(
            revealState = revealState,
            onClick = { /* Add the click handler here */ },
        ) {
            Icon(SwipeToRevealDefaults.MoreOptions, "More Options")
        }
    },
    undoPrimaryAction = {
        SwipeToRevealUndoAction(
            revealState = revealState,
            label = { Text("Undo") },
            onClick = { /* Add the undo handler for primary action */ },
        )
    },
    undoSecondaryAction = {
        SwipeToRevealUndoAction(
            revealState = revealState,
            label = { Text("Undo") },
            onClick = { /* Add the undo handler for secondary action */ },
        )
    },
    onFullSwipe = { /* Add the full swipe handler here */ },
) {
    AppCard(
        onClick = { /* Add the Card click handler */ },
        appName = { Text("App name") },
        appImage = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier =
                    Modifier.size(CardDefaults.AppImageSize)
                        .wrapContentSize(align = Alignment.Center),
            )
        },
        title = { Text("App Card") },
        time = { Text("now") },
        modifier =
            Modifier.semantics {
                // Use custom actions to make the primary and secondary actions accessible
                customActions =
                    listOf(
                        CustomAccessibilityAction("Delete") {
                            /* Add the primary action click handler here */
                            true
                        },
                        CustomAccessibilityAction("More Options") {
                            /* Add the secondary click handler here */
                            true
                        },
                    )
            },
    ) {
        Text("Basic card with Swipe to Reveal actions")
    }
}

Parameters
`primaryAction: @Composable () -> Unit`	A composable to describe the primary action when swiping. The action will be triggered on clicking the action. See `SwipeToRevealPrimaryAction`.
`revealState: RevealState`	`RevealState` of the `SwipeToReveal`
`onFullSwipe: () -> Unit`	A lambda which will be triggered on full swipe from either of the anchors. We recommend to keep this similar to primary action click action. This sets the `RevealState.lastActionType` to `RevealActionType.PrimaryAction`.
`modifier: Modifier = Modifier`	`Modifier` to be applied on the composable
`secondaryAction: (@Composable () -> Unit)? = null`	A composable to describe the contents of secondary action.The action will be triggered on clicking the action. See `SwipeToRevealSecondaryAction`
`undoPrimaryAction: (@Composable () -> Unit)? = null`	A composable to describe the contents of undo action when the primary action was triggered. See `SwipeToRevealUndoAction`
`undoSecondaryAction: (@Composable () -> Unit)? = null`	A composable to describe the contents of undo action when secondary action was triggered. See `SwipeToRevealUndoAction`
`colors: SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors()`	An instance of `SwipeToRevealActionColors` to describe the colors of actions. See `SwipeToRevealDefaults.actionColors`.
`shape: Shape = SwipeToRevealDefaults.CardActionShape`	The shape of primary and secondary action composables. Recommended shape for cards is `SwipeToRevealDefaults.CardActionShape`.
`content: @Composable () -> Unit`	The initial content shown prior to the swipe-to-reveal gesture. Custom accessibility actions should always be added to the content using `androidx.compose.ui.semantics.semantics` - examples are shown in the code samples.

See also
`SwipeToReveal`