Remember Drag and Drop Position with RecyclerView

In this post I will provide a tutorial on how to remember the drag and drop position of your RecyclerView list items in Android. There are few third party libraries that exist to help implement drag and drop in RecyclerView and Paul Burke provided an excellent three part tutorial on how to use native components to implement drag and drop. I will build upon this tutorial to show how your app can remember the new re-ordered position after the list has been re-ordered by drag and dropping. See this in action below.

https://gyazo.com/eb35ae18d5fbe0f4a3bd3d73a85a24eb

Whichever way you implement RecyclcerView drag and drop, the challenge is when you exit the app and come back, how does your app remember the last positions of the list items after they were re-organized. You may think that there is a new Intent(REMEMBER_LIST_POSITION) you can call but there is none, at-least I have not seen any so you will have to implement this manually if you desire such functionality. Here is how I have chosen to implement this functionality. I

  1. Create a standard RecyclerView
  2. Implement drag and drop on the RecyclerView
  3. Attach a listener to the RecyclcerView Adapter to listen for when the list item changes
  4. When the list item changes, grab all the Ids on the items in the collections
  5. Collapse this list into a JSON string and save to the SharedPreference
  6. When the RecyclerView is shown again, fetch the JSON string from SharedPreference and inflate back into a List<Long>
  7. Use this list to sort the items and display, reflecting their last positions the last time they were changed.

f you find the tutorial helpful at anytime please pause and use the social media buttons to share it incase someone else will benefit from it.Let us go ahead and see this in action. As with most things in programming your approach may be different from mine and I will be glad to hear how you solved this problem if it is something that you have had to deal with. The source code for this tutorial can be found here.

Create New Android Studio Project

In this section of the post we want to create a new Android Studio project for our drag and drop demo app. I am using Android Studio 1.4 and if you have created a new Android project lately you will realize that a few things have changed especially with the new project template. Follow the steps below to create new project for this demo app.

Step 1: Create New Project – follow the standard new project wizard to create a new Android Studio project. Give the project any name, select Phone and Tablet form factor. Select the default API level 16 and Blank Activity template.

Step 2: Cleanup – The new template comes with some boiler plate code that we do not need for this demo app. In the activity_main.xml remove the Floating Action Button component. In MainActivity.java file also remove the Floating Action Button code block. In content_main.xml remove the Hello World TextView.

Step 3: Add RecyclerView – in the place where you remove the Hello World TextView in content_main.xml add RecyclerView like this:

Step 4: Add Model Class – at the root of your project add a model class Customer.java. This demo app is showing a list of fictitious customers. The names and images of the people used in this demo app are not real. The images are purchased from Dollar Photo Club.  Here is the content of the Customer.java, use the generate functional to add the boiler plate getter and setter code.

Step 5: Add Drag Image – add this image to your res/drawable folder, we will use this as the handle for our drag and drop.

Step 6: Add Dependencies – Add the following dependencies for the external libraries we will use for this app; many thanks for the authors of those libraries.

Also add this line to your Manifest  <uses-permission android:name="android.permission.INTERNET" />

Step 7: Add Sample Data – we are using sample in memory data to generate the demo data displayed in this app. Optionally create a package called utlities and in this package add a class called SampleData.java. In this class add a method called  public static List<Customer> addSampleCustomers()  and here is the content of that method.

Implement RecyclerView with Drag and Drop

In this section we will go ahead and implement the RecyclerView with drag and drop functionality. Follow the steps below to implement RecyclerView.

Step 1: Add Adapter – at the root of the project add a class file named CustomerListAdapter.java , leave the file alone and lets come back to it in a minute.

Step 2: Implement ItemTouchHelper – to implement ItemTouchHelper we actually need to add four files. To understand the purpose of each of these files. Read these post series. Add the following files to your project .

  1. In your utilities package add ItemTouchHelperAdapter.java and below is the content
  2. In your utilities package add ItemTouchHelperViewHolder.java and below is the content
  3. In your utilities package add SimpleItemTouchHelperCallback.java and here is the content
  4. Add a package called listener and add an interface called OnStartDragListener.java and here is the content
  5. While you are at the listener package add another interface called OnCustomerListChangedListener.java and here is the content
     

Step 3: Implement Custom Row – now we need to add the custom row that lays out the views item in each row of our list. In your res/layout folder add the layout file row_customer_list.xml and here is the content of that file.

Step 4: Implement the Adapter – we now have all the components needed to implement the adapter. Now update the adapter with the following code. I am including the import statements so you can see which library is being referenced from this file. A few things is happening in the code below, for the most part it is a standard implementation of RecyclerView Adapter.

The drag and drop is simply implemented with the Java Collections framework. And after the  swap, we are attaching our own home made listener which lets us know that a swap has been made and returns the new collections of items back to us. This is the list we will now work on.

Step 5: Implement RecyclerView Java Code – open your MainActivity.java and add the following instance variables near the top of the file.

After the onCreate method add this method. And then call this method from the onCreate() method probably after the call to set Toolbar.  Ignore the error warning for a minute.

Update the signature of your MainActivity to implement the two listeners that we added like below and use Android Studio quick fix to implement the methods.

Here is the implementation of the one of the methods, and we will implement the other one in the next section.

At this point, you should be able to run your app. Everything should be working except that when you close the app and open the position of the drag and drop will not be saved. We will implement that next. But make sure that you get the app working before you proceed.

Implement Save Drag and Drop Position

At this point, your drag and drop list should be working and we now want to remember the position of the list items after they have been re-organized. Like I mentioned at the beginning of the post, this is accomplished by saving the ids of the list items to SharedPreference so go ahead and add the following class members to the top of the file.

And in the onCreate() instantiate the SharedPreference like so

Then go ahead and implement the other method that listens for when the list changes and here is the implementation of that method

Then add this method to your MainActivity.java

Now update the line in setupRecyclerView() that get the data from  mCustomers = SampleData.addSampleCustomers();  to  mCustomers = getSampleData();

This is the method that does the little magic of re-displaying items using their last sorted position. All on the fly without re-saving the items back to the database. Obviously, if the data is coming from a database, the above method must run in a background thread to avoid blocking the main thread.  I have used variations of this approach for a few recent projects. I will like to know if you have had to solve a similar problem and what approach you ended up using.

If you think anyone in your social media list can benefit from the list, please feel free to share the post.

Keep coding!

 

 

 

 


Also published on Medium.

About the Author valokafor

I am a Software Engineer with expertise in Android Development. I am available for Android development projects.

follow me on:
3 comments

Comments are closed