Drag and Drop between two RecyclerView

4 min read 07-10-2024

Drag and Drop Between Two RecyclerViews: A Comprehensive Guide

Problem: You're building an Android app with two RecyclerViews, and you need to allow users to seamlessly drag and drop items between them. This might be for a task management app, where users can move tasks between lists, or a shopping cart application where users move items between different categories.

Rephrased: Imagine you're designing an app where you have two lists of things, and you want to let users drag and drop items from one list to the other. This article will show you how to make that happen using Android's powerful RecyclerView.

The Scenario:

Let's say we have two RecyclerViews: recyclerView1 and recyclerView2. We want users to be able to drag items from recyclerView1 and drop them into recyclerView2 (and vice versa).

Here's a basic code example using RecyclerView.ItemTouchHelper and ItemTouchHelper.Callback to handle the drag and drop functionality:

// In your Activity or Fragment

RecyclerView recyclerView1;
RecyclerView recyclerView2;
ItemTouchHelper itemTouchHelper;

// ... other setup code

itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        // Enable dragging and dropping within the same list
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
        // Enable dropping from one list to another
        int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        return makeMovementFlags(dragFlags, swipeFlags);
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        // Handle drag and drop within the same list
        // ... 
        return true;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        // Handle swiping to remove items (not used in this example)
    }

    // ... additional methods for drag and drop between lists
});

// Attach the ItemTouchHelper to both RecyclerViews
itemTouchHelper.attachToRecyclerView(recyclerView1);
itemTouchHelper.attachToRecyclerView(recyclerView2);

Unique Insights:

Here are some key considerations when implementing drag and drop between RecyclerViews:

Data Synchronization: Ensure your data source (e.g., a list or database) is updated correctly when an item is moved between lists.
Unique Identifiers: Each item should have a unique identifier (e.g., ID) to track its movement across lists.
Adapter Communication: You'll likely need to have your Adapters communicate with each other to ensure smooth data updates.
Smooth Animations: Using ItemTouchHelper's onChildDraw() method, you can create custom animations for the drag and drop process, improving the user experience.
Drag and Drop Restrictions: You can implement logic within onMove() to control which items can be moved and where they can be dropped (e.g., preventing certain items from being moved).

Example: Moving Tasks Between Lists

Let's extend our example to a task management app where tasks can be moved between "To Do" and "Done" lists:

// ... (previous code)

// In your Adapter (for both lists)
// Add a method to update the data source when an item is moved

public void moveItem(int fromPosition, int toPosition) {
    // Update your data source (e.g., a list of tasks)
    Task movedTask = tasks.remove(fromPosition);
    tasks.add(toPosition, movedTask);
    // Notify both RecyclerViews to refresh
    notifyItemMoved(fromPosition, toPosition);
    // Notify the other RecyclerView to refresh its data 
    // (assuming a global reference to the other Adapter)
    otherAdapter.notifyItemInserted(toPosition);
}

// ... (inside ItemTouchHelper.Callback)

@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    // Get the Adapters for both RecyclerViews
    ToDoListAdapter toDoAdapter = (ToDoListAdapter) recyclerView1.getAdapter();
    DoneListAdapter doneAdapter = (DoneListAdapter) recyclerView2.getAdapter();

    // Determine which list the item is being moved from
    if (viewHolder.getAdapterPosition() < toDoAdapter.getItemCount()) {
        // Moving from "To Do"
        // If the item is dropped in the "Done" list, move it
        if (target.getAdapterPosition() >= doneAdapter.getItemCount()) {
            toDoAdapter.moveItem(viewHolder.getAdapterPosition(), doneAdapter.getItemCount());
            doneAdapter.notifyItemInserted(doneAdapter.getItemCount());
            return true;
        }
    } else {
        // Moving from "Done"
        // If the item is dropped in the "To Do" list, move it
        if (target.getAdapterPosition() < toDoAdapter.getItemCount()) {
            doneAdapter.moveItem(viewHolder.getAdapterPosition(), toDoAdapter.getItemCount());
            toDoAdapter.notifyItemInserted(toDoAdapter.getItemCount());
            return true;
        }
    }
    return false;
}

Key Considerations:

Efficiency: For large datasets, optimize the drag and drop process to minimize performance impact.
User Feedback: Provide clear visual cues to the user during the drag and drop operation.
Testing: Thoroughly test the drag and drop functionality across different devices and screen sizes.

Resources:

Android Developers: RecyclerView https://developer.android.com/guide/topics/ui/layout/recyclerview
Android Developers: ItemTouchHelper https://developer.android.com/reference/androidx/recyclerview/widget/ItemTouchHelper
GitHub: Drag and Drop Between RecyclerViews Examples https://github.com/search?q=recyclerview+drag+drop+between+lists

By following these guidelines and utilizing the power of RecyclerView and ItemTouchHelper, you can create a smooth and intuitive drag and drop experience for your users between multiple RecyclerViews.

Drag and Drop between two RecyclerView