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:

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

Granlund

Answer 1

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>

Lissy

Answer 2

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"
 />

Locution

thanks kaaloraat, it works too but the solution above is better for beginners. – Granlund

Okay. Its not that complex too. – Locution

Well detailed answer ! – Flee

Very thorough answer. In the drawable xml, instead of gradient I used <solid android:color="@color/in_your_colors_xml" />. NOTE: in the layout xml it's not necessary to use android:scrollbars if it's already in styles xml – Astrict

The marked solution did not work for me. But this one did. It gives way more control over the scrollbar, though some might not think of it as a beginner friendly. – Sandbag

Answer 3

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.

Lamellate

Hello it works but changes only thumb color, can we change scrollbar track color too? – Navaho

Answer 4

Just give your color in the android:scrollbarThumbVertical="@color/yourColor

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

Ludhiana

Answer 5

If your RecyclerView is horizantal use this

android:scrollbarThumbHorizontal="@color/Red1Bold"

If your RecyclerView is vertical use this

android:scrollbarThumbVertical="@color/Red1Bold"

Here is example of horizantal

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewColorChoice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="horizontal"
        android:scrollbarThumbHorizontal="@color/Red1Bold"
        android:scrollbarThumbVertical="@color/Red1Bold"
>

Foppish