Swiping Action Box in Android using Jetpack Compose

If you are an Android user, you must have seen applications that display the list of items and each of those items could be dragged left or right for performing some particular action. Gmail application for Android is the most common example, where you could drag an item left or right from the inbox to archive it. Similarly, in the Contacts and Phone application, you could drag an item left to message and right to place a call. Such elements in technical terms are known as Swiping Action Buttons and can be used for performing various tasks on user gesture of dragging left or right.

So in this article, we will show you how you could create a Swiping Action Box in Android using Jetpack Compose. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Adding dependency (third-party library) in build.gradle (Module) file

Add the below dependency (third-party library) in the build.gradle (Module) file.

Kotlin

dependencies {
    implementation "me.saket.swipe:swipe:1.0.0"
}

Step 3: Adding Vector Assets for Swipe Actions in the drawable folder

As we have swipe left and swipe right, we can plot two separate functions. Each one of them could be displayed using Text or some image. In our demo app, we have placed two images (Vector Assets) to display two different functions when dragged on either side. To add Vector Assets, follow this article How to Add Vector Assets in Android Studio

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.geeksforgeeks.jcswipeableactionbox

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import me.saket.swipe.SwipeAction
import me.saket.swipe.SwipeableActionsBox

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            // Creating a Simple Scaffold
            // Layout for the application
            Scaffold(

                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Swipeable Action Box", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },

                // Creating Content
                content = {

                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {

                        // Fetching local context
                        val mLocalContext = LocalContext.current

                        // Creating a Swipe Action for Calling;
                        // setting icon, background and what
                        // happens when swiped
                        val mCall = SwipeAction(
                            icon = painterResource(R.drawable.ic_call),
                            background = Color.Green,
                            isUndo = true,
                            onSwipe = { Toast.makeText(mLocalContext, "Calling",Toast.LENGTH_SHORT).show()}
                        )

                        // Creating a Swipe Action for Sending a message;
                        // setting icon, background and what happens when swiped
                        val mMessage = SwipeAction(
                            icon = painterResource(R.drawable.ic_message),
                            background = Color.Yellow,
                            isUndo = true,
                            onSwipe = { Toast.makeText(mLocalContext, "Sending Message",Toast.LENGTH_SHORT).show()}
                        )

                        // Creating a Swipe Action Box with start
                        // action as calling and end action as sending message
                        SwipeableActionsBox(startActions = listOf(mCall), endActions = listOf(mMessage)) {

                            // Creating a Button inside Swipe Action Box
                            Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58))) {
                                Text(text = "Swipe Left or Right", fontSize = 25.sp, color = Color.White)
                            }
                        }
                    }
                }
            )
        }
    }
}

Output:

You can see that we are able to create a Swiping Action Button.