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 Scaffold( SwipeToDismiss( Box( |
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 |
Image Result
Finally we will call our SwipeToDelete function inside onCreate() function.
@ExperimentalMaterialApi |
Step 3. Open Theme.kt file which is available inside ui.theme directory and add the following code in bottom of the file.
@Composable MaterialTheme( |
Step 4. Download leftswipe.png image from any browser and add to drawable folder.
The structure be like:
Step 5. Run the app in your emulator or real device and you will get the following output:
OUTPUT
Conclusion: In this article we have covered how to create SwipeToDelete using JetPack Compose.
Article Contributed By :
|
|
|
|
462 Views |