Drag/Drop and Swipe to dismiss functionality in Recycler View

What is ItemTouchHelper

1. This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.
2. 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.

How to use ItemTouchHelper

For using ItemTouchHelper in your application we need to create a variable of ItemTouchHelper.Callback class.

ItemTouchHelper.Callback mIthCallback = new ItemTouchHelper.Callback()

ItemTouchHelper.Callback is an abstract static class with three abstract methods. Those are:

1. public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)
2. public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)
3. public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction)

getMovementFlags() method

Use this method to set the directions of the movements in recycler view. We would set 2 flags for movements, one for drag and drop and other for swiping left and right.

int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; // for drag and drop
int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END; // for swipe left and right
return makeMovementFlags(dragFlags, swipeFlags);

onMove() method

This method is used to do something when the user drags the item of the recycler view in up/down direction.

Complete Signature of this method is:

public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)

The second parameter viewHolder is used to get the item from which the movement has started and the third parameter target is used to get the item at which the movement has stopped.

Collections.swap(mDataList, viewHolder.getAdapterPosition(), target.getAdapterPosition());
mAdapter.notifyItemMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition());

Collections.swap is used to swap the item of the list. And obviously, we must notify the adapter that the items in the list has been moved.

onSwiped() method

Pretty straightforward, a method used for the action of swipe left and right. If one like to dismiss/discard the item from the list use this:

mDataList.remove(viewHolder.getAdapterPosition());
mAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());

Remove the item swiped from the data list and notify the adapter that something has been removed from the list.

EXAMPLE

With this basic info about ItemTouchHelper class, we can develop a simple application. Let’s get started. If you directly wish to jump to the source code, click on the button below.

DOWNLOAD FULL SOURCE CODE

STEP-1

Create a new Android project. Add a basic activity and navigate to styles.xml and paste the following code. Also, add the recycler view library in your app-level build.gradle file.

compile ‘com.android.support:design:25.0.0’

styles.xml

After that, go to your Android Manifest.xml file and the change in application theme from android:theme=”@style/AppTheme” to android:theme=”@style/AppTheme.NoActionBar” .

This is done to remove the default action bar provided by the AppTheme.

STEP-2

Go to res/layout/content_main.xml and add a recycler view widget in the layout.

content_main.xml

STEP-3

Create a new resource file under res/layout directory and name it as recyclerview_row.xml. This layout will be used for displaying each row in the recycler view.

recyclerview_row.xml

STEP-4

Go to MainActivity class and create the below variables.

private RecyclerView mRecyclerView;
private ArrayList mDataList;
private RecyclerViewAdapter mAdapter;
private Toolbar mToolbar;

Then, add two methods for initializing the views of the layout.

initToolbar();
initRecView();

Method for initializing toolbar and floating action button:

private void initToolbar() {
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("Main Activity");
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
//startActivity(new Intent(MainActivity.this, MainActivity.class));
}
});
}

Method for initializing recycler view:(Recycler view and Itemtouchhelper variables will show up in red. Don’t worry ,we will fix it very soon.)

private void initRecView() {
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mDataList = new ArrayList();
addDummmyData(mDataList);
mAdapter = new RecyclerViewAdapter(this, mDataList);
mRecyclerView.setAdapter(mAdapter);
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(mIthCallback);
itemTouchHelper.attachToRecyclerView(mRecyclerView);
}

Method for adding dummy data to recycler view:

private void addDummmyData(ArrayList mDataList) {
for (int i = 0; i < 100; i++) { mDataList.add("Item " + i); } }

STEP-5

Now, we would create adapter for our recycler view. To do that, create a new class and name it as RecyclerViewAdapter and enter the following code.

STEP-6

Go back to your MainActivity class and implement the ItemTouchHelper class like below.

ItemTouchHelper.Callback mIthCallback = new ItemTouchHelper.Callback() {
// method for getting the direction of movements
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; // for drag and drop
int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END; // for swipe left and right
return makeMovementFlags(dragFlags, swipeFlags);
}
// method for drag and drop
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
Collections.swap(mDataList, viewHolder.getAdapterPosition(), target.getAdapterPosition());
mAdapter.notifyItemMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition());
return true;
}
// method for swiping left and right
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
mDataList.remove(viewHolder.getAdapterPosition());
mAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());
}
};

FULL MAIN ACTIVITY CODE

RUNNING THE APP

Run the app and play with the items by moving and swiping it. Have fun 🙂

admin Author

Comments

    Amelia

    (May 7, 2017 - 9:11 AM)

    Thanks for sharing this! Your tutorial helped me a lot.

      admin

      (May 12, 2017 - 3:45 PM)

      You’re welcome 🙂

Leave a Reply

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