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 scrollbar with thumb, alphabets or numbers appear beside thumb.I have attached screenshot to the question of the scrollbar from the application 'Contacts'.

Screenshot:

So, How to modify a scrollbar in my application which is using recyclerview, to create scrollbar like that scrollbar with the alphabet and number bubble or is there any new API or library introduced for that?

Answer 1

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 2

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);         }      }