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:

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.

Answer 1

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