Shashank Chavan Shashank Chavan - 1 year ago 305
Android Question

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

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'.

enter image description here

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 Source

As I can understand from your question, you want to implement the "Fast Scroll" feature in Android.

This feature lets you quickly scroll through a large list. You can easily implement it using this third-party library.

enter image description here

Its very simple, light-weight and is highly customization too. Don't underestimate it by looking at the screenshot above. You can easily make it look like the screenshot you provided. I used it sometime back in one of my apps and got excellent results.


Using this library is also simple. You just need to include its QuickScroll layout and implement the Scrollable interface on your BaseAdapter. Giving this widget the Material look-and-feel is really simple.


Due to user demand, for all those who want to know how to use "Fast Scroll" feature in RecyclerView, here it is for you all. You can use this library.

It can give you results which is very close (if not exact) to the screenshot provided. You just have to use RecyclerViewFastScroller widget in your layout.


Step 1

Add this dependency

compile 'xyz.danoz:recyclerviewfastscroller:0.1.3'

Step 2

Now in your XML you need to put this widget



and then in your code,

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      View rootView = inflater.inflate(R.layout.recycler_view_frag, container, false);

      // Grab your RecyclerView and the RecyclerViewFastScroller from the layout
      RecyclerView recyclerView = (RecyclerView) rootView.findViewById(;
      VerticalRecyclerViewFastScroller fastScroller = (VerticalRecyclerViewFastScroller) rootView.findViewById(;

      // Connect the recycler to the scroller (to let the scroller scroll the list)

      // Connect the scroller to the recycler (to let the recycler scroll the scroller's handle)

      return rootView;

There are lots of additional attributes to customize it the way you want to. You can create exactly the same look-and-feel of the screenshot you provided.

Using a library can save a lot of time, but in case if you want to build this feature from scratch, here is a very useful post for you.

Hope it helps.