Custom Listview Fast Scrollbar in Android

Custom Listview Fast Scrollbar in android

Finally, I came up with a solution. It only works with API level 11 or higher

values/style.xml

<style name="AppTheme" parent="@style/Theme.Sherlock.Light">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:fastScrollThumbDrawable">@drawable/fast_thumb</item>
        <item name="android:fastScrollTrackDrawable">@drawable/fastscroll_track_default_holo_dark</item>

</style>

Apply activity for this theme like below code:

         <activity
            android:name="com.example.viewpager.FirstActivity"
            android:theme="@style/AppTheme"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Activity layout XML like below code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlScrollingPlayList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:fastScrollEnabled="true"
            android:fastScrollAlwaysVisible="true"
            android:scrollbarStyle="outsideInset"
            android:layout_height="match_parent" >
        </ListView>

</RelativeLayout>

Resource image files are

Fast scroll thumb selector XML file:

drawable/fast_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/fastscroll_thumb_pressed_holo"/>
    <item android:drawable="@drawable/fastscroll_thumb_default_holo"></item>

</selector>

Final output like below figure:

Android Custom Scrollbar and fastScrollEnabled

---

UPDATE

The short answer is: "thumb" and "track"are different things, do not put same style. When you area using "fastScrollbarEnabled", the "track" needs to have height and width.

---

old answer below

Apparently you need specify the "thumb" height when with the "fastScrollEnabled" enabled. You are putting the same drawable to "thumb" and "track", is your intention?

See my codes:

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="android:fastScrollTrackDrawable">@drawable/fast_scrollbar_track</item>
        <item name="android:fastScrollThumbDrawable">@drawable/fast_scrollbar</item>

        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>
        <item name="android:scrollbarThumbVertical">@drawable/scrollbar</item>
    </style>

</resources>

fast_scrollbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="45"
        android:endColor="#ff00ff00"
        android:centerColor="#ff00ff00"
        android:startColor="#ff00ff00" />

    <corners android:radius="8dp" />
    <size android:width="4dp" android:height="50dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
</shape>

fast_scrollbar_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="45"
        android:endColor="#ffff0000"
        android:centerColor="#ffff0000"
        android:startColor="#ffff0000" />

    <corners android:radius="8dp" />
    <size android:width="4dp" android:height="50dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
</shape>

scrollbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="45"
        android:endColor="#ff00ff00"
        android:centerColor="#ff00ff00"
        android:startColor="#ff00ff00" />

    <corners android:radius="8dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
</shape>

scrollbar_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="45"
        android:endColor="#ffff0000"
        android:centerColor="#ffff0000"
        android:startColor="#ffff0000" />

    <corners android:radius="8dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
</shape>

Prints of my device:

Scrollbar in listview

Ok, so I needed to add fastScroll to my activity.

<ListView
    android:id="@+id/listView"
    style="@style/CustomTheme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarSize="30dip"
    android:scrollbarStyle="outsideInset"
    android:fastScrollEnabled="true"
    android:scrollbarThumbVertical="@color/blue"
    android:scrollbarTrackVertical="@drawable/side_nav_bar" />

Change ListView's ScrollBar/FastScroll color?

Scrollbar thumb color is set to the android:colorAccent attribute in your app theme. You are sure that is set and is correct, right?

Note that if you're using AppCompat, you will have to exclude the android: prefix from the attribute.

You can find more information on available color attributes here.

android listview fast scroll customization issue

The style you created isn't correct. You need to give it a name. I'm not sure what happened to your last post about this. Do the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="listviewfastscrollstyle" parent="android:Theme">
    <item name="android:fastScrollTrackDrawable">@drawable/listselector</item>
    <item name="android:fastScrollThumbDrawable">@drawable/listselector</item>
</style>

</resources>

In your Manifest set the style like this:

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

As requested, this is the ListView I was testing on:

<ExpandableListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:drawSelectorOnTop="false"
    android:fastScrollAlwaysVisible="true"
    android:fastScrollEnabled="true"
    android:indicatorLeft="8dip"
    android:indicatorRight="52dip"
    android:paddingRight="32dip" />

---

Related Topics