Scrollbar color in RecyclerView

Question

How can I change the color of my scrollbar in a recyclerView?

I have the scrollbar but I want to change its color. My recyclerView is like this:

 <         


        

Answer 1

In case you want to further style your scrollbars, create two drawable resource file in your drawable folder as 1. scrollbar_track and 2. scrollbar_thumb

scrollbar_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="0"
        android:endColor="#9BA3C5"
        android:startColor="#8388A4" />
        <corners android:radius="6dp" />
</shape>

scrollbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient
        android:angle="0"
        android:endColor="#b20111"
        android:startColor="#cf1d2d" />

    <corners android:radius="6dp" />

</shape> 

Now, create a style named scrollbar_style in your styles.xml file as:

<style name="scrollbar_style">
    <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
    <item name="android:scrollbarStyle">outsideOverlay</item>
    <item name="android:scrollbars">vertical</item>
    <item name="android:fadeScrollbars">true</item>
    <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb</item>
    <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>
    <item name="android:scrollbarSize">8dp</item>
    <item name="android:scrollbarFadeDuration">800</item>
    <item name="android:scrollbarDefaultDelayBeforeFade">500</item>
 </style>

Finally, to apply this style to the scrollbar in your recyclerview, add
style="@style/scrollbar_style"
to your recyclerview.

In your case:

<android.support.v7.widget.RecyclerView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/recyclerView"
  style="@style/scrollbar_style"
  android:layout_below="@id/my_toolbar"
  android:layout_above="@+id/progressBar"
  android:scrollbars="vertical"
 />

Answer 2

If you need to change the color in runtime, this is the way.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.annotation.ColorInt;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;

/**
 * Created on 22.3.2016.
 *
 * @author Bojan Kseneman
 * @description A recycler view that will draw the scroll bar with a different color
 */
public class CustomScrollBarRecyclerView extends RecyclerView {

    private int scrollBarColor = Color.RED;

    public CustomScrollBarRecyclerView(Context context) {
        super(context);
    }

    public CustomScrollBarRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomScrollBarRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setScrollBarColor(@ColorInt int scrollBarColor) {
        this.scrollBarColor = scrollBarColor;
    }

    /**
     * Called by Android {@link android.view.View#onDrawScrollBars(Canvas)}
     **/
    protected void onDrawHorizontalScrollBar(Canvas canvas, Drawable scrollBar, int l, int t, int r, int b) {
        scrollBar.setColorFilter(scrollBarColor, PorterDuff.Mode.SRC_ATOP);
        scrollBar.setBounds(l, t, r, b);
        scrollBar.draw(canvas);
    }

    /**
     * Called by Android {@link android.view.View#onDrawScrollBars(Canvas)}
     **/
    protected void onDrawVerticalScrollBar(Canvas canvas, Drawable scrollBar, int l, int t, int r, int b) {
        scrollBar.setColorFilter(scrollBarColor, PorterDuff.Mode.SRC_ATOP);
        scrollBar.setBounds(l, t, r, b);
        scrollBar.draw(canvas);
    }
}

These methods are defined in View class, so the same princible should work of other views like ScrollView and ListView.

Answer 3

You can do this by including following line of code in your Recyclerview

android:scrollbarThumbVertical="@drawable/yoursdrawablefile

The drawable file in my case is:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#000" android:endColor="#000"
        android:angle="45"/>
    <corners android:radius="6dp" />
</shape>