Hello, in this tutorial, I’ll be showing you how to add swipe and drag gesture events to a RecyclerView.
Before you begin, you’ll need to have a RecyclerView ready, populated with some views.
Adding Swipe and Drag Gestures Events to RecyclerViews
Hello, in this tutorial, I’ll be showing you how to add swipe and drag gesture events to a RecyclerView.
You can download the project I am using in this video by clicking here.
Or you can see the source code for the files used in the project here.
ItemTouchHelper
To add swipe and drag events to a RecyclerView, we need the help of 2 classes:
(1) ItemTouchHelper
(2) Callback from ItemTouchHelper
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.
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.
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.
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.
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
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.
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);
If we run the app, we’ll be able to move the items around.
That is all for this video. If you find this helpful, give it a like, share, and subscribe.
