How to use fastScrollEnabled in RecyclerView?

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

Answers


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>

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>

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

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


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:


Need Your Help

Data doesn't load in UITableView until I scroll

objective-c uitableview cocoa synchronous

I am trying to load parsed data in cells, but the problem is that it is happening synchronously and UitableView doesn't show until the data has finished loading. I tried to solve the problem by using

How Do I Use Raw Socket in Python?

python sockets raw-sockets

I am writing an application to test a network driver for handling corrupted data. And I thought of sending this data using raw socket, so it will not be corrected by the sending machine's TCP-IP st...