Swipe gestures in RecyclerView | Swipe to Delete and Archive in RecyclerView
In this tutorial, we’re going to implement swiping in our recyclerView. If you’re don’t know how to create recyclerView then go through my previous tutorial on recyclerView. Click Here.
Here we implement swipe gestures for delete and archive, when we swipe from right to the left item of the recyclerView will delete and when we swipe from left to the right item of the recyclerView will archive. Also, we can undo the item back into the recyclerView.
Before going to implement it make sure we have created the recyclerView. Otherwise, there is no use of these gestures. If you’re not created your recyclerView then you can create it by clicking the above click here button or if you have already created your recyclerView then you can follow the below steps to implement the swiping gestures into your recyclerView.
Create a class for swipe gesture
After the onCreate() method create a class for swipe by using ItemTouchHelper.SimpleCallback() method. Simple callbacks need two parameters, one is the drag directions and another one is the swipe. Since we’re not implementing the drag directions in this tutorial so add “0” in the drag parameter.
For swipe, if you’re using only the left directions then add ItemTouchHelper.LEFT or if you want to use the right direction then we can use the ItemTouchHelper.Right. Since we’re using both the directions, so add both in the swipe parameter.
(After onCreate() method)
ItemTouchHelper.SimpleCallback simpleCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {
@Override
public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
return false;
}
@Override
public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
}
}
Here onMove() method is used for drag and drop. If you want to move your items in the recyclerView then we can use this method to move your items. We’ll discuss it in our next tutorial.
Since we’re only implementing the swiping behavior here, so will add our codes inside the onSwiped() method.
Attach the simple callback to our recyclerView
After creating the simple callback methods simply attach the simple callback to your recyclerView inside onCreate() method, otherwise, you’re not able to swipe left or right your items in the recyclerView. The below lines will add a simple callback method into the recyclerView.
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleCallback);
itemTouchHelper.attachToRecyclerView(recyclerView);
Give the directions
Now inside the onSwiped() we’re using a switch case so that we can handle the directions. That means the LEFT and RIGHT directions.
Swipe LEFT to delete gesture
First, we need to get the positions of the items and remove them from the recyclerView using the recyclerView adapter which we already initialized in our previous tutorial. Click here to see.
Below lines of code delete the item from the recyclerView using the swipe gesture.
@Override
public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
final int position = viewHolder.getAdapterPosition();
switch (direction){
case ItemTouchHelper.LEFT:
moviesList.remove(position);
recyclerAdapter.notifyItemRemoved(position);
break;
}
}
Now, to undo the same deleted item into your recyclerView we’ll use a snackbar with an undo button. For that create a String variable which will keep the deleted movie or item and specify it to “null”, because initially there is no deleted movie.
String deletedMovie = null;
Now before going to delete the movie we need to store that the movie which will be deleted into the String variable that we are created inside the LEFT case and then remove the item.
String deletedMovie = null;
ItemTouchHelper.SimpleCallback simpleCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {
@Override
public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
return false;
}
@Override
public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
final int position = viewHolder.getAdapterPosition();
switch (direction){
case ItemTouchHelper.LEFT:
deletedMovie = moviesList.get(position);
moviesList.remove(position);
recyclerAdapter.notifyItemRemoved(position);
break;
}
}
For the snackbar, we need to add one material library inside the build.gradle app file.
implementation ‘com.google.android.material:material:<latest-version>’
Now use the snackbar to undo the item. Snackbar takes three parameters; first, the view that is the recyclerView, the second one is the text which is then deleted movie and the third one is the duration. After that we need to set action by using the setAction() method here we passing two things, one is the text of the action that is “Undo” and then onClickListener. After that show the snackbar by using the “.show()” method.
Snackbar.make(recyclerView, deletedMovie + “, Deleted!”, Snackbar.LENGTH_LONG)
.setAction(“Undo”, new View.OnClickListener() {
@Override
public void onClick(View view) {
}
}).show();
Inside onclick, what we will do, we will undo the movie inside our recyclerView. For that, we can simply add our deleted movie back to the position where the item is deleted by using moviesList.add(position, deletedMovie); method.
Now we need to add that row back to the recyclerView, for that notify the recyclerView that the item is inserted by using recyclerAdapter.notifyItemInserted(position);
The final look of the snackbar to undo the deleted movie:
Snackbar.make(recyclerView, deletedMovie + “, Deleted!”, Snackbar.LENGTH_LONG)
.setAction(“Undo”, new View.OnClickListener() {
@Override
public void onClick(View view) {
moviesList.add(position, deletedMovie);
recyclerAdapter.notifyItemInserted(position);
}
}).show();
Swipe RIGHT to archive gesture
For that first create a list of string of archived movies which is equal to the new array list. Initial this above the ItemTouchHelper where we initialize our deleted movie.
String deletedMovie = null;
List<String> archivedMovies = new ArrayList<>();
Now we need to get the movie which will be archived by using their positions inside the RIGHT case.
case ItemTouchHelper.RIGHT:
final String movieName = moviesList.get(position);
archivedMovies.add(movieName);
moviesList.remove(position);
recyclerAdapter.notifyItemRemoved(position);
Snackbar.make(recyclerView, movieName + “, Archived.”, Snackbar.LENGTH_LONG)
.setAction(“Undo”, new View.OnClickListener() {
@Override
public void onClick(View view) {
archivedMovies.remove(archivedMovies.lastIndexOf(movieName));
moviesList.add(position, movieName);
recyclerAdapter.notifyItemInserted(position);
}
}).show();
break;
Here, we get the movies position and remove it from the recyclerView and store it inside the archivedMovies list.
Inside the snackbar, we handle the undo button for the archived movies.
Handle the background
Here we simply add the backgrounds for the deleted and archived movie. For that, we need to add a dependency in the build.gradle app file.
implementation ‘it.xabaras.android:recyclerview-swipedecorator:1.2.3’
For background create onDraw() method inside the ItemTouchHelper class, inside that, simply add these lines.
** Note: First import the drawable files.
@Override
public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
new RecyclerViewSwipeDecorator.Builder(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
.addSwipeLeftBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.colorRed))
.addSwipeLeftActionIcon(R.drawable.delete)
.addSwipeRightBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.colorGreen))
.addSwipeRightActionIcon(R.drawable.archive)
.create()
.decorate();
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
}
Output
