DEV Community

Cover image for Swipe to delete, archive etc from Cloud Firestore with RecyclerView
Siddharth Singh Baghel
Siddharth Singh Baghel

Posted on

Swipe to delete, archive etc from Cloud Firestore with RecyclerView

App's Overview

  • In this article I am gonna take you through the development of
    Swipe Delete Feature, specifically we are going to delete the
    data present in Cloud Firestore Database in just a swipe.

  • Sounds amazing, yes it is amazing, let's start :



Note:

The article only contains the explanation of "swipe to delete" feature, firebase implementation and UI details are not discussed, but I will provide the GitHub from which you can easily go through the complete code of the app.

Table Of Content

Dependencies Setup

dependencies{

   implementation 'it.xabaras.android:recyclerview-swipedecorator:1.2.3'

}

Enter fullscreen mode Exit fullscreen mode

Code Explanation

  • Create an ItemTouchHelper.SimpleCallback, instantiate an ItemTouchHelper with this callback.
  • Copy the code snippet below ๐Ÿ‘‡

Reference - ListActivity.kt

/*

   -> `SimpleCallback` gives us option to tell about the swipe 
       direction.

   -> `ItemTouchHelper.RIGHT or ItemTouchHelper.LEFT`

*/

   val callback: ItemTouchHelper.SimpleCallback = object :

            ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT or ItemTouchHelper.LEFT) {

            override fun onMove(

                recyclerView: RecyclerView,

                viewHolder: RecyclerView.ViewHolder,

                target: RecyclerView.ViewHolder

            ): Boolean {

                return false

            }

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {


               //Take action for swiped direction 

               //Delete on swipe left

               //Archive on swipe right

              //Customise according to your mood

         }

Enter fullscreen mode Exit fullscreen mode
  • Now let us attach our ItemTouchHelper with the RecyclerView.

  • Copy the below ๐Ÿ‘‡ code snippet just outside callback

val itemTouchHelper = ItemTouchHelper(callback)

        itemTouchHelper.attachToRecyclerView(rv)

/* rv - replace with your  recycler view variable name */

Enter fullscreen mode Exit fullscreen mode
  • The above code is sufficient for the swipe to delete feature. It will look something like below ๐Ÿ‘‡

Firebase

  • To decorate our swipe feature we will override onChildDraw method. This method has various functions, some of them will be discussed in this article others you can explore here.

  • Override onChildDraw method below onSwiped method.

  • Copy the below code snippet๐Ÿ‘‡

  override fun onChildDraw(c: Canvas, recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) {



                RecyclerViewSwipeDecorator.Builder(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)

                    .addBackgroundColor(

                        ContextCompat.getColor(

                            this@ListActivity,

                            android.R.color.holo_red_light

                        )

                    )

                    .addActionIcon(R.drawable.ic_baseline_delete_sweep_24)  // add any icon of your choice

                    .addSwipeRightLabel("Deleting the Item") //Label according to your choice

                    .addSwipeLeftLabel("Deleting the Item")

                    .setSwipeRightLabelColor(R.color.white) // behind color on  swiping

                    .setSwipeLeftLabelColor(R.color.white)
                    .create()
                    .decorate()

                super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)

            }



Enter fullscreen mode Exit fullscreen mode
  • That's all now you can see the magic ๐Ÿ˜‡

GitHub Repository

  • Fork the repository for better and easy understanding and for quick learning.

    GitHub logo Siddharth-sing / Swipe-delete-from-firebase-

    This app will demonstrate the swipe to delete from firebase feature.

    Article is on dev.to click below ๐Ÿ‘‡



    App's Overview

    • In this article I am gonna take you through the development of Swipe Delete Feature, specifically we are going to delete the data present in Cloud Firestore Database in just a swipe.

    • Sounds amazing, yes it is amazing, let's start :


    Watch the video


    Note:

    The article only contains the explanation of "swipe to delete" feature, firebase implementation and UI details are not discussed, but I will provide the GitHub from which you can easily go through the complete code of the app.

    Table Of Content

    ##Dependencies Setup

    dependencies{
    
       implementation 'it.xabaras.android:recyclerview-swipedecorator:1.2.3'
    
    }
    
    

    Code Explanation

    • Create an ItemTouchHelper.SimpleCallback, instantiate an ItemTouchHelper with this callback.
    • Copy the code snippet below ๐Ÿ‘‡

    Reference -โ€ฆ




Writer's Support

  • If you find the article useful show some โค๏ธ by staring at some of my repositories and following me on dev.to and github.

Top comments (0)