RecyclerView – Swipe+delete and reorder items

In this chapter of the RecyclerView andorid tutorial we are going to implement how we can swipe+delete and reorder items inside of the list.

It means, when we swipe the item to the left or to the right, then this item gonna be deleted. When we tap the item a bit longer, then the item will be transparent, and we can move it everywhere inside the list.

Our app already contains many things. In the very last chapter, we have implemented how we can insert a new item into the list. If you haven’t done it yet, then it is highly recommended, because we will use this features in this chapter.

Add new items

GitHub

If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.

GitHub – add_new_item branch

Step 1 – Create variable

First of all, we have to figure out how we can achieve the swipe and drag functionality. Fortunetly, we can attach callbacks to the RecyclerView. In our case, we will use the SimpleCallback object and the ItemTouchHelper classes.

SimpleCallback is a simple wrapper to the default Callback, which we can construct with drag and swipe directions. This class will handle the flag callbacks as well. 

ItemTouchHelper is a utility class to add swipe to dismiss and drag & drop support to RecyclerView. It works with a RecyclerView and a Callback class, which configures what type of interactions are enabled and also receives events when user performs these actions. This class is designed to work with any LayoutManager.

Now, open the RecyclerFragment::class. There, as a member variable, we are going to add a private variable lazily. It means, the value gets computed only upon first access.

Copy and paste the below code into the RecyclerFragment::class.


itemTouchHelper_reOrder
Notes

Check out the arguments of the ItemTouchHelper.SimpleCallback. Here, we can set the directions of the drag and swipe moves, which are integer values from the ItemTouchHelper class.

Next, take a look on the 4 overwritten methods. These methods will be called, when we do the above mentioned movements. First, we are going to add the code of the onSwiped() method.

Third thing, what you have to note is the call of the ItemTouchHelper() method. As the argument, it will get the simpleItemTouchCallback variable. Whitout this call, the type of the itemTouchHelper_reOrder varibale will be Unit (in Java void) and we can’t attach to it the RecyclerView.

Step 2 – Swipe

If we swipe out an item, then it will be deleted. It means, we have to remove this item from the list, then we have to notify the RecyclerView about the changes. To get to know which position is affected, we have to identify it. Fortunetly we can get it by called the adapterPosition variable from the viewHolder, which is the first argument of the onSwiped() method.

So, after the short introduction, the method look like below. Copy and paste it into the onSwiped() method.


onSwipe()

Step 3 – Attach the RecyclerView

Before we can run the app, we have to attach the RecyclerView to the Callback. So, copy and paste the below code at the end of the onCreateView() method, but before it returns.

itemTouchHelper_reOrder
    .attachToRecyclerView(view.recyclerView)

Run the app

First in this chapter, run the app and create at least 2 new items. Now, swipe to the left and right. If you have done everything correctly, then the items will be deleted.

Step 4 – Reorder the items

The second part of this tutorial is about the implementaion of the reorder feature. For this, we can use the same SimpleCallback, what we have used for the swipe movement. In this case, we will add some code to the rest 3 methods.

onMove()

First in this method, we will store temporarily the previous and the new position. For this, we can use the arguments viewHolder and target of the onMove() method. Then, we will move the item in the list of the ToDo items, but this will be implemented inside of the ToDoViewModel class. The last line will notify the adapter, that we have moved an item to a new position.

So, finally the onMove() should look like this:


onMove()
toDoViewModel.moveItem(Int, Int)

The next step is the creation of the moveItem() function inside of the ToDoViewModel class. Now we will do it a bit differently. 

Move you cursor to the red moveItem word in the onMove() function. After that, a red bulb will be visible at the left side of the line.

Click on it, and select the option of “Create member function ‘ToDoViewModel.moveItem'”. This will automatically generate for us the function inside of the ToDoViewModel class. So open the class from the viewmodel package, and check out the method. It should look like below.


moveItem()

First, in this function, we will take out the ToDo item from the list. Then we will remove it from its position. 

Next, we have to figure out where we dropped it. If we did it before its original position, then we can just add it to the list using the to Integer variable. In case, if we drop it after its original position, then we have to subtract 1 from the to Integer variable, because we have removed this item from the list already and the rest items in the list got a new position.

Finally, the code looks like this.


moveItem()

Now go back to the RecyclerFragment::class. The error must be gone.

onSelectedChanged()

When we tap the item and start move it, then the item will be a bit transparent. It means, we will set the the alpha of the item. During the drag, we will set the alpha to 0.5. Then, when we dropped it, we have to set it back to 1.

First, we are going to set to 0.5 the alpha, but only when we are dragging the item. The ItemTouchHelper has a state, an Integer value, which represents the state of dragging.

The onSelectedChanged() function should look like this:


onSelectedChanged()
clearView()

This function will be called by the ItemTouchHelper when the user’s interaction with an element is over and it also completed its animation.

Here, we just set back the alpha to 1.


clearView()

Run the app

Finally run the app. Create some new items, and try out the swipe and the reorder features.

GitHub

The source code is available on GitHub

GitHub – swipe_and_reorder_items branch

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Follow and like us:
Click to rate this post!
[Total: 0 Average: 0]

Leave a Reply

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