How to create material design like custom scrollbar with numbers and alphabets bubble in recyclerview
For anyone still looking for an answer for this. I have found a number of libraries which provide this functionality:
- https://github.com/krimin-killr21/MaterialScrollBar
- https://github.com/plusCubed/recycler-fast-scroll
- https://github.com/danoz73/RecyclerViewFastScroller
- 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.
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);
}
}