Android adding RecyclerView Swipe to Delete and Undo

In my recent article Gmail like Inbox we have successfully cloned the gmail’s inbox using a RecyclerView with some cool animations. But one thing missing in that is adding swipe to delete and undo functionalities as gmail does.

In this article we are going to add swipe to delete and undo options in a recycler view. Instead of continuing that article, we are going to start a fresh project to make it simpler to understand.

1. How RecyclerView Swipe works? ItemTouchHelper

With the help of ItemTouchHelper class you can add swipe to dismiss, drag & drop support to RecyclerView. Swiping the row will remove the row from the RecyclerView, but it won’t refresh the data. You can see an empty row displayed on swiping the row. You have to take care of refreshing the list by removing the item from the adapter dataset.

ItemTouchHelper.SimpleCallback provides certain callback methods like onMove(), onChildDraw(), onSwiped() when the row is swiped. Showing the background view, removing the item from adapter can be done using these callback methods.

Below is the code snipped of ItemTouchHelper and attaching it to recycler view. This code has to be bit modified in order to make the swipe and undo works. We’ll see how to do that shortly.

RecyclerView recyclerView = findViewById(R.id.recycler_view);

ItemTouchHelper.SimpleCallback itemTouchHelperCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) {
    @Override
        public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        return false;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        // Row is swiped from recycler view
        // remove it from adapter
    }

    @Override
        public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
            // view the background view
        }
    };
        
// attaching the touch helper to recycler view
new ItemTouchHelper(itemTouchHelperCallback).attachToRecyclerView(recyclerView);

1.1 Defining the Swipe Directions

The swipe directions can be decided while creating the SimpleCallback(). In this article we just used Left -> Right direction. If you want other directions, you can combine with | operator. We can define LEFT, RIGHT, UP and DOWN directions.

new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT)

1.2 Designing The Layout

Planning the layout is very important while adding background view of the row. Lot of people are providing the background by drawing the view on a Canvas in onChildDraw() method. This will be a tedious process drawing it on a canvas if the background view complex. Design the same in an xml layout is much easier. So I have placed both the foreground and background views in a simple layout using FrameLayout keeping the foreground layout on top.

The foreground view will be always visible in the recycler view, and when swipe is performed the background will be visible staying in a static position.

Below image will give you an idea how the foreground and background views are placed in a frame.

2. Example JSON – Restaurant Menu

I have created an example JSON that contains restaurant menu with proper names and images. We are going to consume this json to display the food items in our RecyclerView list.

https://api.androidhive.info/json/menu.json

3. Creating New Project

Now that we have the required knowledge of ItemTouchHelper, let’s start a new project and see how to get the desired output we are looking for.

Note: This project is developed using Android Studio 3.0 Beta. In order to get this article working, get the latest the version of Android Studio here.

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.

2. Open build.gradle located under app folder and add RecyclerView, Glide and Volley dependencies.

dependencies {
    implementation 'com.android.support:recyclerview-v7:26.1.0'
 
    // glide image library
    implementation 'com.github.bumptech.glide:glide:3.7.0'
    
    // volley http library
    implementation 'com.android.volley:volley:1.0.0'
    implementation 'com.google.code.gson:gson:2.6.2'
}

3. Add the below resources to your strings.xml, dimens.xml and colors.xml respectively.

    Recycler Swipe
    Settings
    My Cart
    DELETE

    16dp
    10dp
    30dp
    90dp

    #111
    #FFF
    #ea3732
    #fa315b
    #535353
    #a9a9a9

4. Open styles.xml add the below styles to apply Lighter theme to your app. This make the text to darker as we have white background to toolbar.