How to create material design like custom scrollbar with numbers and alphabets bubble in recyclerview

Question

In many new android applications and their latest update those applications(mostly material design) have a custom scrollbar with letters and numbers, while scrolling the scrollb

Answer 1

I use this new one now - https://github.com/L4Digital/FastScroll

Below is my previous one.

I have used fastscroller by FutureMind in Android Studio

https://github.com/FutureMind/recycler-fast-scroll

Usage

1) Compile required dependency by adding

compile 'com.futuremind.recyclerfastscroll:fastscroll:0.2.4'

2) Edit Layout File to add FastScroller

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <com.futuremind.recyclerviewfastscroll.FastScroller
        android:id="@+id/fastscroll"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

3) In Activity/Fragment associate fastScroller with your recycler view

    recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
    fastScroller = (FastScroller) findViewById(R.id.fastscroll);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    recyclerView.setAdapter(adapter);

    //has to be called AFTER RecyclerView.setAdapter()
    fastScroller.setRecyclerView(recyclerView);

4) In your RecyclerView.Adapter implement SectionTitleProvider to display the content on Bubble

    public class MyAdapter ... implements SectionTitleProvider{

        ...

        @Override
        public String getSectionTitle(int position) {
            //this String will be shown in a bubble for specified position
            return getItem(position).substring(0, 1);
        }

    }

Answer 2

For anyone still looking for an answer for this. I have found a number of libraries which provide this functionality:

1. https://github.com/krimin-killr21/MaterialScrollBar
2. https://github.com/plusCubed/recycler-fast-scroll
3. https://github.com/danoz73/RecyclerViewFastScroller
4. https://github.com/timusus/RecyclerView-FastScroll

All of the above provide FastScroll mechanism (what you're looking for) - though some look nicer than others.

I have found the MaterialScrollBar easiest to get set with up and use, as well as the fact that it has the nicest cosmetics (adheres to material design guidelines and looks just like Contacts app).

This library is also actively maintained and developed, issues & PR's being closed etc.

Hope this may help someone as I spent a lot of time looking for this myself.

Answer 3

List View Variants library seems to be perfect for your needs, try it out.

Check out the demo below.

Answer 4

This library works fine and it is easy to use - Material Scroll Bar

It has also support for custom font.