SwipeToRevealCard

Component in Wear Material Compose

[SwipeToReveal] Material composable for [Card]s. 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

Last updated: 2024-10-22 13:47

Installation

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

Overloads

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

Parameters

name	description
primaryAction	A composable to describe the primary action when swiping. The action will be triggered on clicking the action. See [SwipeToRevealPrimaryAction].
revealState	[RevealState] of the [SwipeToReveal]
onFullSwipe	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] to be applied on the composable
secondaryAction	A composable to describe the contents of secondary action.The action will be triggered on clicking the action. See [SwipeToRevealSecondaryAction]
undoPrimaryAction	A composable to describe the contents of undo action when the primary action was triggered. See [SwipeToRevealUndoAction]
undoSecondaryAction	A composable to describe the contents of undo action when secondary action was triggered. See [SwipeToRevealUndoAction]
colors	An instance of [SwipeToRevealActionColors] to describe the colors of actions. See [SwipeToRevealDefaults.actionColors].
shape	The shape of primary and secondary action composables. Recommended shape for cards is [SwipeToRevealDefaults.CardActionShape].
content	The initial content shown prior to the swipe-to-reveal gesture.

Code Example

SwipeToRevealCardSample

@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun SwipeToRevealCardSample(swipeToDismissBoxState: SwipeToDismissBoxState) {
    val revealState = rememberRevealState()
    SwipeToRevealCard(
        revealState = revealState,
        modifier =
            Modifier.fillMaxWidth()
                // Use edgeSwipeToDismiss to allow SwipeToDismissBox to capture swipe events
                .edgeSwipeToDismiss(swipeToDismissBoxState)
                .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
                            }
                        )
                },
        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("AppName") },
            appImage = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier =
                        Modifier.size(CardDefaults.AppImageSize)
                            .wrapContentSize(align = Alignment.Center),
                )
            },
            title = { Text("AppCard") },
            time = { Text("now") }
        ) {
            Text("Basic card with SwipeToReveal actions")
        }
    }
}