Adding fast scroll to RecyclerView in Android

While working with a huge list of data, it’s often convenient to quickly go through the list by means of a scrollbar. As a matter of fact, while reading this article itself, you can see a scrollbar on the right side of the page, which you can use to quickly navigate to the end of the page.

This design pattern is quite common, and Android is no exception, as we can easily find numerous examples of scrollbars, especially when the content is being displayed in a list. Y

ou can see some examples of this below:

While working on AfterShoot, I noticed that often the number of images in a user’s device can exceed a few thousand, so it became crucial that I implement a similar mechanism that allows users to quickly navigate through their images.

In this blog, we’ll be taking a look at how I added fast scroll support to the RecyclerView that displays a list of images in AfterShoot. After reading this post, you’ll have enough knowledge to go ahead and do so in your own app!

Fast Scroll in ListViews

If you’re someone who is using ListViews in your app to display a bunch of content, then adding a fast scroll is relatively easy. You can simply add the following attribute tag to your ListView’s xml tag and be done with it!

You can further customize the look and feel of the resulting scrollbar.

Fast Scroll in RecyclerView Step by Step

Considering the fact that ListViews have long been replaced by RecyclerViews (thanks to better performance and customizability of the latter), let’s see how to implement a fast scroll in the same.

Step 1: Add and set up a RecyclerView in your app

This is the most obvious step. You need to add a RecyclerView to your app and ensure that it’s populated with some data.

Step 2: Add the FastScroll tag to the layout xml

The next step would be to set the fastScrollEnabled flag to true in our RecyclerView’s layout xml entry:

If we try to run the app now, it crashes with the following error message:

This error essentially means that before we set the fastScroll to our RecyclerView, we need to define the drawables (or images) that will be used for the fast scroller. In other words, we need to define how it will look like before we try to enable it for our RecyclerView.

Step 3: Define the drawables for the scrollbar

Up next, we need to define what the scrollBar is going to look like. To do that, we need to define 4 properties in our RecyclerView’s xml file. This can be done as follows:

The explanations of these properties are as follows:

fastScrollHorizontalThumbDrawable: A drawable that will be used to draw the icon, which can be dragged across the horizontal axis.
fastScrollHorizontalTrackDrawable: A drawable that will be used to draw the line that will represent the scrollbar on the horizontal axis.
fastScrollVerticalThumbDrawable: A drawable that will be used to draw the icon which can be dragged across the vertical axis.
fastScrollVerticalTrackDrawable: A drawable that will be used to draw the line that will represent the scrollbar on the vertical axis.

For each of these properties, we have a drawable in place. You can find the drawable I used here:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners
        android:radius="50dp" />

    <padding
        android:paddingLeft="22dp"
        android:paddingRight="22dp" />

    <solid android:color="@color/primaryDarkColor" />

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/darker_gray" />

    <padding
        android:top="10dp"
        android:left="10dp"
        android:right="10dp"
        android:bottom="10dp"/>
</shape>

Feel free to modify these as per your liking or requirements.

Step 4: Run the app to see the fast scroll in action

That’s it! If you run the app now, you should be able to see the fast scroll icon on the right-hand side of the screen. Tapping the thumb (the blue icon) should allow you to quickly scroll up and down the list:

Step 5 (Optional): Fix for a large number of items

If your RecyclerView contains a large number of items, you might notice that the fast scroll thumb is extremely tiny and isn’t accessible. This is a known issue with RecyclerView and is already flagged in the AOSP issue tracker here:

While we wait for a fix, it’s a good idea to instead use a third party library that allows you to do the same with little to no effort in the process.

RecyclerView-FastScroll is one such library:

If you want to see the entire implementation, head over to the GitHub repo for the AfterShoot app:

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others find it! Feel free to leave a comment 💬 below.

Have feedback? Let’s connect on Twitter.