How to use fastScrollEnabled in RecyclerView?

Question

I am new to RecyclerView and I want to implement the fast scroll feature in RecyclerView like google contact application and search on the internet and i found that now Android provide officially New fastScrollEnabled boolean flag for RecyclerView. So my question is can someone provide the sample implementation of it.

Here is the official document from google https://developer.android.com/topic/libraries/support-library/revisions.html#26-0-0

Disadvantaged

follow this link RecyclerViewFastScroller – Armoire

@NileshRathod Thank you for your reply but i want to do without using any third party library. – Disadvantaged

in that link there is many custom available – Armoire

@CHANDANSHARMA check my answer – Thermography

Answer 1

With Support Library 26, we can easily enable fast scrolling for RecyclerView. Let’s get to it!

Let’s go over each property one by one:

1. fastScrollEnabled : boolean value to enable the fast scrolling. Setting this as true will require that we provide the following four properties.
2. fastScrollHorizontalThumbDrawable : A StateListDrawable that will be used to draw the thumb which will be draggable across the horizontal axis.
3. fastScrollHorizontalTrackDrawable : A StateListDrawable that will be used to draw the line that will represent the scrollbar on horizontal axis.
4. fastScrollVerticalThumbDrawable : A StateListDrawable that will be used to draw the thumb which will be draggable on vertical axis.
5. fastScrollVerticalTrackDrawable : A StateListDrawable that will be used to draw the line that will represent the scrollbar on vertical axis.

In case someone is not aware of the names of each part of a Scrollbar, here is a image showing it:

Source: Make your website stand out with a custom scrollbar

---

add in build.gradle

dependencies {
    ....
    implementation 'com.android.support:design:26.0.1'
    implementation 'com.android.support:recyclerview-v7:26.0.1'
}

Since Support Library 26 has now been moved to Google’s maven repository, let’s include that in our project level build.gradle

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

activity_main.xml

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fastScrollEnabled="true"
    app:fastScrollHorizontalThumbDrawable="@drawable/thumb_drawable"
    app:fastScrollHorizontalTrackDrawable="@drawable/line_drawable"
    app:fastScrollVerticalThumbDrawable="@drawable/thumb_drawable"
    app:fastScrollVerticalTrackDrawable="@drawable/line_drawable">
    
</android.support.v7.widget.RecyclerView>

add below four xml file in your drawable folder,

line_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/line"/>
    
    <item
        android:drawable="@drawable/line"/>
</selector>

line.xml

<?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>

thumb_drawable.xml

```

thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
    
    <corners
        android:topLeftRadius="44dp"
        android:topRightRadius="44dp"
        android:bottomLeftRadius="44dp" />
    
    <padding
        android:paddingLeft="22dp"
        android:paddingRight="22dp" />
   
    <solid android:color="@color/colorPrimaryDark" />
    
</shape>

Wooton

I followed your example, but my view is not scrolling fast, only when I am touching the thumb. But the thumb is so small and often I can´t touch it. Is this normal? – Deflate

android.jlelse.eu/fast-scrolling-with-recyclerview-2b89d4574688 . May be this is a blog from where the answer is given. – Disaffiliate

The small thumb is a known issue: issuetracker.google.com/issues/64729576 Unfortunately it's been six months and no sign of a fix :( – Velma

I've tried this but how to show text that moves along scrollbar when I scroll the list like this i.sstatic.net/kMh1q.png – Etana

Any way to set those programmatically? – Freeman

Currently, there is no way to set it programmatically. – Wooton

app:fastScrollEnabled="true" causes Error android.view.InflateException with AndroidX – Underhand

@KintanPatel what the padding tag on the thumb.xml file does? For me, if I remove it, I don't see any difference. In my case, I'm implementing androidx.recyclerview:recyclerview:1.1.0 library in my project. – Centrum

Answer 2

Add the attributes to the RecyclerView tag in your layout file:

<android.support.v7.widget.RecyclerView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...
    app:fastScrollEnabled="true"
    app:fastScrollHorizontalThumbDrawable="@drawable/fast_scroll_thumb"
    app:fastScrollHorizontalTrackDrawable="@drawable/fast_scroll_track"
    app:fastScrollVerticalThumbDrawable="@drawable/fast_scroll_thumb"
    app:fastScrollVerticalTrackDrawable="@drawable/fast_scroll_track"
/>

Make two drawables. The "track" drawable can be any drawable, but the "thumb" drawable must be a state list drawable.

Example drawable/fast_scroll_track.xml file:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#80ffffff" />
</shape>

Example drawable/fast_scroll_thumb.xml file:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ff0" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
        </shape>
    </item>
</selector>

Unreserve

Answer 3

As you know that, RecyclerView supports “fast scroller” in Support Library 26.0.0.

Note: Keep in mind it’s XML-only though.

Thermography

How do you add a letter to the thumb? Or is that not supported in support library's fast scroller? – Volsci

It's not supported to add letter – Gifu

Answer 4

For an eye candy scroll bar thumb(round borders) :

   <android.support.v7.widget.RecyclerView
                android:id="@+id/netflixVideoGridView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                app:fastScrollEnabled="true"
                app:fastScrollHorizontalThumbDrawable="@drawable/fast_scroll_thumb"
                app:fastScrollHorizontalTrackDrawable="@drawable/fast_scroll_track"
                app:fastScrollVerticalThumbDrawable="@drawable/fast_scroll_thumb"
                app:fastScrollVerticalTrackDrawable="@drawable/fast_scroll_track"
                 />

fast_scroll_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/thumb"/>

    <item
        android:drawable="@drawable/thumb"/>
</selector>

thumb.xml

<?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/colorPrimaryDark" />

    <stroke
        android:width="1dp"
        android:color="#69f0ae" />

</shape>

track.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#80ffffff" />
    <padding
        android:padding="0dp"/>
</shape>

Result:

Outvote