26

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

Chandan Sharma
  • 2,803
  • 1
  • 17
  • 25

4 Answers4

38

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.

add in build.gradle

    dependencies {
    ....
    compile 'com.android.support:design:26.0.1'
    compile '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

<?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:topLeftRadius="44dp"
        android:topRightRadius="44dp"
        android:bottomLeftRadius="44dp" />

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

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

</shape>
Kintan Patel
  • 1,230
  • 8
  • 15
  • 7
    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? – egmontr Dec 18 '17 at 09:37
  • 1
    https://android.jlelse.eu/fast-scrolling-with-recyclerview-2b89d4574688 . May be this is a blog from where the answer is given. – MohK Mar 07 '18 at 06:55
  • 2
    The small thumb is a known issue: https://issuetracker.google.com/issues/64729576 Unfortunately it's been six months and no sign of a fix :( – Carmen Mar 23 '18 at 12:20
  • I've tried this but how to show text that moves along scrollbar when I scroll the list like this https://i.stack.imgur.com/kMh1q.png – neo Jul 12 '18 at 01:19
  • Any way to set those programmatically? – android developer Jul 21 '19 at 20:03
  • Currently, there is no way to set it programmatically. – Kintan Patel Aug 06 '19 at 08:52
  • 1
    `app:fastScrollEnabled="true"` causes Error `android.view.InflateException` with AndroidX – Cor Dec 01 '21 at 11:13
12

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>
Randy Sugianto 'Yuku'
  • 71,383
  • 57
  • 178
  • 228
4

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

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

usage

ziLk
  • 3,120
  • 21
  • 45
3

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:

enter image description here

Hitesh Sahu
  • 41,955
  • 17
  • 205
  • 154