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