Swipe to Dismiss -Jetpack Compose

In this blog, we are going to learn about gestures in Jetpack Compose. Jetpack compose is a modern toolkit for building native UI. Compose provides a variety of APIs to help you detect gestures that are generated from user interaction. Swipe to dismiss is a single composable function to delete the item from the list and many other functionalities to perform an action like archive the product, move to cart and add to wishlist, etc.

Add dependency

implementation "androidx.compose.material:material:$compose_version”

1	implementation "androidx.compose.material:material:$compose_version”

Swipe to dismiss composable function direct offered by the material theme in android.

Create UI in Compose

@Composable
private fun adminCard() {
    Column(modifier = Modifier.fillMaxWidth(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally) {
        Card(
            shape = RoundedCornerShape(14.dp),
            backgroundColor = Color.White,
            modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),

            ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(10.dp),
                verticalAlignment = Alignment.CenterVertically

            ) {
                Image(
                    painter = painterResource(R.drawable.download),
                    contentDescription = null,
                    modifier = Modifier.size(65.dp),
                )
                Row(modifier = Modifier.padding(start = 10.dp),
                    verticalAlignment =Alignment.CenterVertically) {
                    Column(modifier = Modifier.weight(1f)) {
                        Text(
                            text = "Admin",
                            style = TextStyle(
                                color = Color.Gray,
                                fontSize = 16.sp,
                                textAlign = TextAlign.Center
                            )
                        )
                        Text(
                            text = "This is admin information",
                            style = TextStyle(
                                color = Color.Red,
                                fontSize = 16.sp,
                                textAlign = TextAlign.Center
                            )
                        )
                    }

                }
            }
        }
    }

@Composable

private fun adminCard() {

Column(modifier = Modifier.fillMaxWidth(),

verticalArrangement = Arrangement.Center,

horizontalAlignment = Alignment.CenterHorizontally) {

Card(

shape = RoundedCornerShape(14.dp),

backgroundColor = Color.White,

modifier = Modifier

.padding(10.dp)

.fillMaxWidth(),

) {

Row(

modifier = Modifier

.fillMaxWidth()

.padding(10.dp),

verticalAlignment = Alignment.CenterVertically

) {

Image(

painter = painterResource(R.drawable.download),

contentDescription = null,

modifier = Modifier.size(65.dp),

)

Row(modifier = Modifier.padding(start = 10.dp),

verticalAlignment =Alignment.CenterVertically) {

Column(modifier = Modifier.weight(1f)) {

Text(

text = "Admin",

style = TextStyle(

color = Color.Gray,

fontSize = 16.sp,

textAlign = TextAlign.Center

)

Text(

text = "This is admin information",

style = TextStyle(

color = Color.Red,

fontSize = 16.sp,

textAlign = TextAlign.Center

)

}

First of all, we make a UI on which we have to apply gestures. I have created a card view that has some admin details like names and messages. this card is a swipeable view that we can swipe to right or left.

Composable Function

@Composable
@ExperimentalMaterialApi
fun SwipeToDismiss(
    state: DismissState,
    modifier: Modifier = Modifier,
    directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),
    dismissThresholds: (DismissDirection) -> ThresholdConfig = { FractionalThreshold(0.5f) },
    background: @Composable RowScope.() -> Unit,
    dismissContent: @Composable RowScope.() -> Unit
)

@Composable

@ExperimentalMaterialApi

fun SwipeToDismiss(

state: DismissState,

modifier: Modifier = Modifier,

directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),

dismissThresholds: (DismissDirection) -> ThresholdConfig = { FractionalThreshold(0.5f) },

background: @Composable RowScope.() -> Unit,

dismissContent: @Composable RowScope.() -> Unit

)

This is the single Composble function to use swipe any view and perform an action in Compose.

State-> state in this composable is performing a vital role. we write our logic inside lambda for the confirmStateChange parameter of the rememberDismissState method.

Modifier-> An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text, or buttons.

DissmissContent-> That is the place used for the content UI to be visible in the dismiss function.

Background-> That’s the surface is used to background a particular item. Generally, you might add color, icon, text, etc on to indicate to item swipe.

Complete Code

@ExperimentalMaterialApi
@Composable
fun swipeToDismiss() {
    val dismissState = rememberDismissState(initialValue = DismissValue.Default)


    SwipeToDismiss(
        state = dismissState,
        /***  create dismiss alert Background */
        background = {
            val color = when (dismissState.dismissDirection) {
                DismissDirection.StartToEnd -> Color.Green
                DismissDirection.EndToStart -> Color.Red
                null -> Color.Transparent
            }
            val direction = dismissState.dismissDirection

            if (direction == DismissDirection.StartToEnd) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color)
                        .padding(8.dp)
                ) {
                    Column(modifier = Modifier.align(Alignment.CenterStart)) {
                        Icon(
                            imageVector = Icons.Default.ArrowForward,
                            contentDescription = null,
                            tint = Color.White,
                            modifier = Modifier.align(Alignment.CenterHorizontally)
                        )
                        Text(
                            text = "Move to Archive", fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center,
                            color = Color.White
                        )
                    }

                }
            } else {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color)
                        .padding(8.dp)
                ) {
                    Column(modifier = Modifier.align(Alignment.CenterEnd)) {
                        Icon(
                            imageVector = Icons.Default.ArrowBack,
                            contentDescription = null,
                            tint = Color.White,
                            modifier = Modifier.align(Alignment.CenterHorizontally)
                        )
                        Spacer(modifier = Modifier.heightIn(5.dp))
                        Text(
                            text = "Move to Bin",
                            textAlign = TextAlign.Center,
                            fontWeight = FontWeight.Bold,
                            color = Color.LightGray
                        )

                    }
                }
            }
        },
        /**** Dismiss Content */
        dismissContent = {
          adminCard()
        },
        /*** Set Direction to dismiss */
        directions = setOf(DismissDirection.EndToStart, DismissDirection.StartToEnd),
        )
}

@ExperimentalMaterialApi

@Composable

fun swipeToDismiss() {

val dismissState = rememberDismissState(initialValue = DismissValue.Default)

SwipeToDismiss(

state = dismissState,

/*** create dismiss alert Background */

background = {

val color = when (dismissState.dismissDirection) {

DismissDirection.StartToEnd -> Color.Green

DismissDirection.EndToStart -> Color.Red

null -> Color.Transparent

}

val direction = dismissState.dismissDirection

if (direction == DismissDirection.StartToEnd) {

Box(

modifier = Modifier

.fillMaxSize()

.background(color)

.padding(8.dp)

) {

Column(modifier = Modifier.align(Alignment.CenterStart)) {

Icon(

imageVector = Icons.Default.ArrowForward,

contentDescription = null,

tint = Color.White,

modifier = Modifier.align(Alignment.CenterHorizontally)

)

Text(

text = "Move to Archive", fontWeight = FontWeight.Bold,

textAlign = TextAlign.Center,

color = Color.White

)

}

} else {

Box(

modifier = Modifier

.fillMaxSize()

.background(color)

.padding(8.dp)

) {

Column(modifier = Modifier.align(Alignment.CenterEnd)) {

Icon(

imageVector = Icons.Default.ArrowBack,

contentDescription = null,

tint = Color.White,

modifier = Modifier.align(Alignment.CenterHorizontally)

)

Spacer(modifier = Modifier.heightIn(5.dp))

Text(

text = "Move to Bin",

textAlign = TextAlign.Center,

fontWeight = FontWeight.Bold,

color = Color.LightGray

)

}

/**** Dismiss Content */

dismissContent = {

adminCard()

/*** Set Direction to dismiss */

directions = setOf(DismissDirection.EndToStart, DismissDirection.StartToEnd),

)

}

In this code, we make an admin card swipeable to right or left. when cards swipe on the right side they are move-in archive, and the cards swipe on the left side are deleted.

DismissDirection used to card move on different sides. according to directions, we change the color of the card.

Preview

In this preview, you have seen the card move to the right side and the background color is green, which also indicates a text message move to archive.
at the same preview on the move item on the left side but the background color changes to red and also indicates a message move to bin/delete.

Conclusion:

In this blog, we have learned about the Gesture in jetpack compose. we have learned how to implementation of the Swipe to Dismiss Ui create and perform the action in Android.

For more information regarding the compose gesture in the android visit the link.

Thanks for reading this blog. You can also check other blogs from here.

Always be ready for learning 🙂

Govind Singh

28 Feb, 2022
Created by - Govind Singh

. . .

Swipe to Dismiss -Jetpack Compose

Add dependency

Create UI in Compose

Composable Function

Complete Code

Preview

Conclusion:

Leave a Comment Cancel Reply

Message Sent!