Swipe or Slide and Drag and Drop items in RecyclerView

Hello, in this tutorial, I’ll be showing you how to add swipe and drag gesture events to a RecyclerView.

Follow on Twitter: Codeible (@codeible) / Twitter.

Adding Swipe and Drag Gestures Events to RecyclerViews

Download Sample Project to Follow Along

Before we begin, you’ll need to have a RecyclerView ready, and populated with some views.

You can download the project I am using for this tutorial by clicking here.

Intro

To add swipe and drag events to a RecyclerView, we need the help of the ItemTouchHelper class, and Callback from ItemTouchHelper.

The ItemTouchHelper help us connect touch events to a RecyclerView and activate the Callback class to handle what happens when a swipe or drag event occur.

Adding Swipe/Slide

In the MainActivity where the RecyclerView is, create a new ItemTouchHelper object inside the onCreate() method. Then pass in a new Callback object.

There are 3 methods that are automatically implemented.

The getMovementFlags() method is used to tell the helper what directions we want to support for our swipe or drag gestures.

Zero (0) means nothing so we will not be able to move anything. If we run the app, we will not be able to swipe or drag.

To enable the events, add the helper to the RecyclerView using the attachToRecyclerView () method from the helper.

helper.attachToRecyclerView(recyclerView);

Replace 0 with makeMovementFlags() in getMovementFlags().

@Override
public int getMovementFlags(
@NonNull RecyclerView recyclerView,
@NonNull RecyclerView.ViewHolder viewHolder) {
      return makeMovementFlags();
}

It takes 2 arguments. One for the drag flags and another for the swipe flags. These flags determine the direction we support.

Put 0 for the drag flags for now.

return makeMovementFlags(0, );

To allow swiping from the left, pass ItemTouchHelper.END in the second argument.

return makeMovementFlags(
   0, 
   ItemTouchHelper.END
);

If we run the app, we will be able to swipe from left to right. If we try to swipe from right to left, nothing happens.

Left To Right Swipe

Muti-Direction Support

To allow multiple directions, separate each direction with the pipe symbol.

ItemTouchHelper.END | 

Enable right to left movement by passing in START.

ItemTouchHelper.END | ItemTouchHelper.START

Restart the app and we’ll be able to swipe from both directions.

Both directional Swipe Demo

Enable Dragging

To enable dragging, the same method is used.

If we look at the documentation, the directions we can use are DOWN, END, LEFT, RIGHT, START and UP.

In the drag flags parameter, use the UP and DOWN flags.

Drag Flags Implemented

If we run the app now, we will be able to drag the items up and down. Press and hold on the item for a second and you’ll be able to move the item.

Drag Demo

Removing Item on Swipe

Now let’s see how we can handle the swipe events.

Whenever the item in the RecyclerView goes out of screen, the onSwiped() callback will be called. The direction parameter returns the direction that triggered the event.

public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {

}

Add a switch statement inside and use the direction as the activation expression.

Since we provided 2 flags for swipe, we’ll have 2 cases. The first case is ItemTouchHelper.END and the second case is ItemTouchHelper.START.

Now we can provide the logic to what we want to do.

To remove the item when we swipe from the right, inside the START case, grab the list that the RecyclerView is using for its data. Call remove() and get the item index using the viewHolder parameter.

Lastly, call notifyItemRemoved() from the adapter. This’ll update the view and create the delete animation.

If we run the app, and swipe from the right, the item will be removed from the view.

Swipe Left to Right Demo

Swapping Items with Drag

To handle drag events, we do it in the onMove() callback method.

To swap the items when we drag the items on top of each other, declare a variable call draggedItemIndex in the onMove() method. This will represent the index of the currently dragged item in the RecyclerView.

@Override
public boolean onMove(...) {
    int draggedItemIndex;

    return false;
}

To get the index, grab the viewHolder object from the parameter and call getAdapterPosition().

int draggedItemIndex = viewHolder.getAdapterPosition();

Declare another variable call targetIndex under draggedItemIndex. This will represent the index of the item that it was dragged on top of.

To get the index, grab the target object from the parameter and call getAdapterPosition().

int targetIndex = target.getAdapterPosition();

To swap the items, use the swap() method from the Collections class.

It takes 3 arguments, (1) the first is the list that is used by the RecyclerView, (2) the second is the index of the item we’re trying to swap, and (3) the third is the index of the target.

Collections.swap(recyclerViewItems, draggedItemIndex, targetIndex);

Lastly, call notifyItemMoved() from the adapter and pass in the position of the current item followed by the position of the target.

adapter.notifyItemMoved(draggedItemIndex, targetIndex);

Preview Code

If we run the app, we’ll be able to move the items around.

Swapping Demo

That is all for this tutorial. If you find this helpful, give it a like, share, and subscribe.

Thumbnail (Codeible.com)

Adding Swipe and Drag Gestures Events to RecyclerViews