Styling the scrollbar thumb

Question

I'm trying to change the outlook of the scrollbar thumb for a ListView.

I added the following property to the listview:

android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"

scrollbar_vertical_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="#FF9900" android:startColor="#FF9900"/> 
    <corners android:radius="1dp" /> 
    <size android:width="3dp" /> 
</shape>

After applying my gradient I noticed I have tho scrollbars or scrollbar thumbs, as you can see in following picture (at the beginning of the page there's the left one and then it changes to the second one):

It seems like I didn't override the theme style for the scrollbar thumb.

Does anybody know, what could be wrong?

Answer 1

You've override the wrong property.

You should do this instead:

<item name="android:fastScrollThumbDrawable">@drawable/scrollbar_vertical_thumb</item>

Answer 2

Update your ListView by adding 'scrollbarThumbVertical' property,

android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"

Then add following to 'scrollbar_vertical_thumb.xml' in drawable folder,

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:angle="0" android:endColor="#6699FF" android:startColor="#3333FF" />
<corners android:radius="1dp" />
<size android:width="10dp" />
</shape>