Android ListView thumb ScrollBar

Question

I want to see the following thumb scrollbar:

http://www.androidpatterns.com/uap_pattern/scroll-thumb

What I am seeing is:

enter image description here

My XML Layout is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.google.ads.AdView
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="xxaassss"
        ads:loadAdOnCreate="true" >
    </com.google.ads.AdView>

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

</LinearLayout>

My Java code in onCreate of Activity class (I am extending from Activity class and not ListActivity):

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
ListView list=(ListView)findViewById(R.id.list);
ArrayList<HashMap<String, String>> categoriesList = new ArrayList<HashMap<String, String>>();

        for(int i=0;i<119;i++) {
            HashMap<String, String> map = new HashMap<String, String>();
            map.put(KEY_ID, String.valueOf(i));
            //map.put(KEY_TITLE, "hello");
            map.put(KEY_TITLE, Prayer.tip.getNthLine(i, true).replace("~", ""));
            map.put(KEY_ARTIST, "");
            map.put(KEY_DURATION, "");
            map.put(KEY_THUMB_URL, String.valueOf(getResources().getIdentifier("img" + i, "drawable", getPackageName())));
            categoriesList.add(map);

        }
        LazyAdapter adapter=new LazyAdapter(this, categoriesList);
        list.setAdapter(adapter);

        list.setFastScrollEnabled(true);

I haven't posted code of LazyAdapter as I think it has nothing to do with the styling of that fast thumb scrollbar. If required, I can post that code too.

http://stackoverflow.com/questions/3071068/change-scrollbar-color-in-android — Brijesh Thakur, Jun 20 '13 at 04:02
You are seeing that scrollbar thumb because you are running your app on Android 4.0 or above. The thumb in the link is from Android 2.3. You can get that image and use it from link @Brijesh posted above. — Milan, Jun 20 '13 at 04:42

score 7 · Accepted Answer · edited Jun 18 '15 at 17:10

Change your xml code like this

<com.google.ads.AdView
    android:id="@+id/adView"`enter code here`
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ads:adSize="SMART_BANNER"
    ads:adUnitId="xxaassss"
    ads:loadAdOnCreate="true" >
</com.google.ads.AdView>

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:divider="#FFF"
    android:fadeScrollbars="false"
    style="@style/CustomTheme"
    android:scrollX="0px"
    android:scrollY="0px"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:scrollbarSize="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:scrollbars="vertical" />

and in your style

<style name="CustomTheme" parent="android:Theme">
<item name="android:scrollbarTrackVertical">@drawable/scroll_track</item>
<item name="android:scrollbarThumbVertical">@drawable/scroll_thumb</item>

like in manifest

<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/CustomTheme">

I added this code but error in styles.xml is reported. Is there any place where I can get scroll_track and scroll_thumb images — Piyush-Ask Any Difference, Jun 20 '13 at 05:40

score 1 · Answer 2 · edited Mar 06 '14 at 13:05

Just change the android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb" and create a drawable as per your need.

Like

<ListView android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb" />

in the Drawable:

<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="1dp" /> 
</shape>

I think this is what you want!

Android ListView thumb ScrollBar

2 Answers2

Linked