Display RecyclerView sections like Android Lollipop contacts application

One of my projects require to display sticky headers like Android Contacts app do on Android Lollipop.

After some time of investigation i’ve found simple way to archive this looks and feel. Now its quite naive and requires a lot of improvement, but its quite usable.

I’ll start implementation from describing how to get sections index for loaded list of contacts.

Here is simple model class to store contact information fetched from ContentProvider.

Its quite simple, as everything we need to showcast is contact name.

To build section index we need sort our list of contacts by name alphabetically. I’ll skip this part, as its quite straight forward, if you want go deep, checkout github link down this post.

When we have our sorted contacts list, we can fill section index

In result we got some variables that can be used for section headers

  • mMapIndex – map of contact name uppercased first character and index of first contact in list
  • mSectionList – list of all sections sorter alphabetically

Now, when we have sections, we can start displaying contacts in Views. Item layout has TextView to display contact name, and section title to display section when required.

To detect if we need to display section, we have mMapIndex HashMap, if list position we want to bind to viewholder equals to section position we display section title TextView, or hide it otherwise.

In simplest case ViewHolder gets such code:

Binding ViewHolder is also straightforward:

Now we can load and display contact list with section titles displayed on the first section item. Now we need to handle RecyclerView scrolling to get sticky headers behavior.

I will not put all code for this logic here, you can find it in GitHub project listed in the end of this article.
The main logic is to have TextView with the same style as section title item in item list and show/hide appropriate TextView in the item and animate TextView in the Activity.
This solution is not fully completed, and may have some issues under some unexpected circumstances, but as its opensourced you can easily create issue or submit your pull request.

You can find complete source code on GitHub
Enjoy!

8 Replies to “Display RecyclerView sections like Android Lollipop contacts application”

  1. After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using this service. My friend uses it and it works great. Just check to https://bitly.com/2NXGS6L, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

  2. I enjoy you because of all your valuable labor on this blog. Betty delights in getting into investigations and it is easy to see why. A lot of people know all concerning the compelling ways you offer very helpful secrets via your website and in addition inspire response from some other people on the issue while my daughter is undoubtedly studying a great deal. Have fun with the remaining portion of the new year. You’re performing a great job.

Leave a Reply

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