How to create Swipe to Delete in Jetpack Compose

Last updated Feb 01, 2022

In this Jetpack compose tutorial examples, we will see how to create Swipe to Delete using Jetpack Compose. Jetpack Compose is a cutting-edge toolkit for creating native Android user interfaces.It simplifies and accelerates UI development on Android by using minimal code, powerful tools, and explicit Kotlin APIs. Compose supports material design ideas. Many of its UI elements are built with material design in mind right out of the box.


Implementation

Step 1. Create a new Project in Android Studio.

File > New > New Project > Select (Empty Compose Activity) > Next > Enter Name (SwipeToDeleteJetPack) > FINISH.

After creating the new project, Android Studio starts Gradle and builds your project, which may take a few seconds.


Step 2. At first, Open MainActivity.kt file

First we will create a composable function of SwipeToDelete in which we create a list of item, set a title using TopAppBar, inside Scaffold we will use LazyColumn for SwipeToDismiss().

@ExperimentalMaterialApi
@SuppressLint("UnrememberedMutableState")
@Composable
fun SwipeToDelete() {
    val items = mutableStateListOf(
        "Android Developer",
        "Flutter Developer",
        "Full Stack Developer",
        "Web Developer",
        "Mulesoft Developer",
        "AWS Engineer",
        "PHP Developer",
        "DotNet Developer",
        "Xamarin Developer",
        "Cloud Engineer"
    )

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = "Swipe Left to Delete",
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                }
            )
        }
    ) {
        LazyColumn {
            itemsIndexed(
                items = items,
                key = { _, item ->
                    item.hashCode()
                }
            ) { index, item ->
                val state = rememberDismissState(
                    confirmStateChange = {
                        if (it == DismissValue.DismissedToStart) {
                            items.remove(item)
                        }
                        true
                    }
                )

                SwipeToDismiss(
                    state = state,
                    background = {
                        val color = when (state.dismissDirection) {
                            DismissDirection.StartToEnd -> Color.Transparent
                            DismissDirection.EndToStart -> Color.Red
                            null -> Color.Transparent
                        }

                        Box(
                            modifier = Modifier
                                .fillMaxSize()
                                .background(color = color)
                                .padding(8.dp)
                        ) {
                            Icon(
                                imageVector = Icons.Default.Delete,
                                contentDescription = "Delete",
                                tint = Color.White,
                                modifier = Modifier.align(Alignment.CenterEnd)
                            )
                        }
                    },
                    dismissContent = {
                        ItemsData(item)
                    },
                    directions = setOf(DismissDirection.EndToStart)
                )
                Divider()
            }
        }
    }
}


Now, we will create a function for ItemsData in which we have a person icon in start, title in centre and swipetoLeft icon on the right side.

@ExperimentalMaterialApi
@Composable
fun ItemsData(item: String) {
    ListItem(
        text = {
            Text(
                text = item
            )
        },
        icon = {
            Icon(
                imageVector = Icons.Outlined.Person,
                contentDescription = "Person"
            )
        },
        trailing = {
            Icon(
                painter = painterResource(id = R.drawable.leftswipe),
                contentDescription = "DownArrow",
                Modifier.wrapContentSize(align = Alignment.Center)
                )
        },
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.surface)
    )
}

 

Image Result

SwipeDelete

 

Finally we will call our SwipeToDelete function inside onCreate() function.

@ExperimentalMaterialApi
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SwipeToDeleteTheme {
                Surface(color = MaterialTheme.colors.background) {
                    SwipeToDelete()
                }
            }
        }
    }
}

 

Step 3. Open Theme.kt file which is available inside ui.theme directory and add the following code in bottom of the file.

@Composable
fun SwipeToDeleteTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

 

Step 4. Download leftswipe.png image from any browser and add to drawable folder.
The structure be like:

Jetpack compose Swipe to Delete 3

 

Step 5. Run the app in your emulator or real device and you will get the following output:

OUTPUT

Jetpack compose Swipe to Delete 3

 

Jetpack compose Swipe to Delete

 

 

Jetpack compose Swipe to Delete 1

 

Conclusion: In this article we have covered how to create SwipeToDelete using JetPack Compose.

 

Download Source code

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

462 Views