Swipe To Dismiss RecyclerView

24 / May / 2016 by Bharat Ghimire 3 comments

This tutorial is about how to create “swipe to dismiss” RecyclerView item like Gmail app. For this, we don’t need any 3rd party Library. For this purpose, you just need to add one class which is part of Android Support Library. The name is “ItemTouchHelper”.

By now you know that this blog is all about how to use ItemTouchHelper class to make your RecyclerView item swipeable.

Let’s first understand ItemTouchHelper class. If you really don’t bother about all the theory like me then go to this link to clone the code and start experimenting.
Swipe To Dismiss RecyclerView

ItemTouchHelper Class

ItemTouchHelper is a utility class to add swipe to dismiss and drag & drop support to RecyclerView. ItemTouchHelper class extends RecyclerView.ItemDecoration and Implements RecyclerView.OnChildAttachStateChangeListener . In Order to use ItemTouchHelper, you need to create ItemTouchHelper.Callback. This class lets you control the touch event like swipe and move by providing a callback for the same. It also provides the callback to override the default animation.

To implement Swipe to Dismiss behaviour in recycler view we have to override following methods of ItemTouchHelper.Callback.

  • getMovementFlags(RecyclerView recyclerView,ViewHolder viewHolder)
  • onMove(RecyclerVIew recyclerView,ViewHolder viewHolder,ViewHolder viewHolderTarget) (needed if you want to add functionality of drag and drop).
  • onSwiped(ViewHolder, int)

Before implementing ItemTouch Helper lets first go with these callbacks. The First method we are going to discuss is

getMovementFlags(RecyclerView ,ViewHolder)
It takes parameters

  • recyclerView: The RecyclerView to which ItemTouchHelper is attached.
  • viewHolder: The ViewHolder for which the movement information is necessary.

and returns

  • flags specifying which movements are allowed on this ViewHolder.
@Override
public int getMovementFlags(RecyclerView recyclerView, 
        RecyclerView.ViewHolder viewHolder) {
    int swipeFlags = Direction.RIGHT;
    return makeMovementFlags(0, swipeFlags);
}

To specify in which direction you want to swipe, you have to override this method. In our example, we enable only swipe right. makeMovementFlag(int, int) provide convenience to create Movement flag.

The second method we are going to discuss is

onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)

It takes parameters

  • recyclerView: The RecyclerView to which ItemTouchHelper is attached to.
  • viewHolder: The ViewHolder which is being dragged by the user.
  • target:  The ViewHolder over which the currently active item is being dragged.

and returns

  • true if the viewHolder has been moved to the adapter position of the target.

If you want to make any changes during dragging the RecyclerView item then you have to override this method. If this method returns true, ItemTouchHelper assumes item has been moved to the adapter position of target place.
The Final and important method for the swipe to dismiss is

onSwiped(RecyclerView.ViewHolder viewHolder, int direction)

It takes parameters

  • viewHolder: The ViewHolder which has been swiped by the user.
  • direction: The direction to which the ViewHolder is swiped. It is one of, UPDOWN, LEFT or RIGHT. If your getMovementFlags(RecyclerView, ViewHolder) method returned relative flags instead of LEFT; RIGHT direction will be relative as well. (START or END).

This method is called when user swiped the item. In our example, we just delete that item which is swiped right.

@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
itemTouchHelperAdapter.swipeToDelete(viewHolder.getAdapterPosition());}

let’s discuss the code in the GitHub

We create a helper class called ItemSwipeHelper which extends ItemTocuhHelper.Callback where we override all the callback method

public class ItemSwipeHelper extends ItemTouchHelper.Callback {
   private int direction;
   private ItemTouchHelperAdapter itemTouchHelperAdapter;
    public ItemSwipeHelper(int direction,ItemTouchHelperAdapter itemTouchHelperAdapter) {
        this.direction = direction;
        this.itemTouchHelperAdapter= itemTouchHelperAdapter;
    }
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
       int swipeDirection=0;
        switch(direction)
        {
            case Direction.LEFT:
                swipeDirection=ItemTouchHelper.LEFT;
            break;
            case Direction.RIGHT:
                swipeDirection=ItemTouchHelper.RIGHT;
                break;
            case Direction.UP:
                swipeDirection=ItemTouchHelper.UP;
                break;
            case Direction.DOWN:
                swipeDirection=ItemTouchHelper.DOWN;
                break;
        }
        return makeMovementFlags(0,swipeDirection);
    }
    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        return false;
    }
    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        itemTouchHelperAdapter.swipeToDelete(viewHolder.getAdapterPosition());
    }
}

Now our callbacks are ready, we can create our ItemTouchHelper and call attachToRecyclerView(RecyclerView)

ItemTouchHelper.Callback itemTouchCallBack=new ItemSwipeHelper(Direction.RIGHT,movieAdapter);
ItemTouchHelper swipeToDismissTouchHelper =new ItemTouchHelper(itemTouchCallBack);
swipeToDismissTouchHelper.attachToRecyclerView(mRecyclerview);

That’s all for now, we are ready to go. For any queries please comment.

Thanks for reading. Happy learning!

FOUND THIS USEFUL? SHARE IT

comments (3)

  1. Manpreet Anand

    Nice one. I’ll definitely try this one out.
    One question, can this be implemented with a normal ListView?

    Reply
    1. Bharat Ghimire

      Thanks Manpreet for a reading blog. You can’t use this for ListView but there are many third party libraries you can explore for the ListView.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *