How to make a drag and drop Recycler View in Android using Kotlin
Animations always look great with a recycler view especially when we can interact with individual elements by swiping, dragging, or dropping. In this article, we are going to add an Item Touch Helper to our recycler view adapter to implement the functionality shown in the video above. This behavior can be added to any recycler view that you might be using already in your apps. Believe me, It looks and feels awesome.
What is Item Touch Helper?
This 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.
Item touch helper provides two types of callback for two different functionalities.
For Swipe Behavior: ItemTouchHelper.Callback.onSwiped(ViewHolder, int)
For Moving Items : ItemTouchHelper.Callback.onMove(RecyclerView, ViewHolder, ViewHolder) .
We will be using the onMove method of callback in this article to move items in our recycler view from one position to another.
Let’s get started
Step 1:
I will be using data binding inside my recyclerview adapter as most of you will be already using view or data binding already in your project. Along with that I will be using diffutil inside my adapter for the same reason.
I will not be creating the layout here as it does not have a lot to show. So you can get the layout from my git repository. This is the standard recycler view adapter that I use in my projects.
Step 2:
Now that we have created an adapter the next step is to create attach it to our recycler view. Once you have done that it's time to start the magic of the item touch helper. As we discussed earlier we need to create a callback for the item touch helper and attach it to item touch helper.
A simple callback for item touch helper here up, down, start, and end indicates the positions where we can move our item in recycler view. As we will not be using swipe behavior you can only use up and down but it will allow the user to move the where ever one likes. It looks cool.
Step 3:
Now we have created the call back we need to implement some members.
Step 4:
In this step, we have implemented the body of onMove first we need to get the adapter that is attached to our recycler view. As we have moved the item between its initial and final position, we need to tell the adapter to change its position from these two points. So, we get the item's position from the adapter and then the target position and let the adapter know that item has moved from position a to position b using notifyItemMoved().
Now our recycler view will look like this.
Step 5 :
Lets animate.
When the item is moved we make it transparent to differentiate it from other elements in the recycler view by turning its alpha to 0.5 and once the item is placed in its new position we remove the transparency. Now, our recycler view is in full shape but there is still one more step to go.
Step 6:
In real life scenario, you will need to keep track of the changed list as you may need to change the order of the items in room, data store, shared preferences, or maybe send the modified list to an API. For that, we need to change the list according to the changes in our recycler view here we need to write a custom function inside the adapter to change the contents accordingly.
here we make a function inside the adapter that will do insertion and deletion at the same time to relocate the items in the list then at the end, you can send the list where it's needed. We need to call this function in onMove to change the list items just when the items in the recycler view change.
If you need a youtube tutorial then do let me know. Check out the complete tutorial on my Github.
Connect with me on LinkedIn
