Custom scrollbar Android

Question

How I can make this scrollbar:

Answer 1

To change the thumb image you can simply create the following style and apply it to your ScrollView:

<style name="your_style_name">  
    <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
    <item name="android:scrollbarStyle">outsideOverlay</item>
    <item name="android:scrollbars">vertical</item>
    <item name="android:fadeScrollbars">false</item>
    <item name="android:scrollbarThumbVertical">@drawable/scroller_thumb</item>
</style>

where scroller_thumb is your custom image for the scroller thumb.

also note the following attributes:

1. "android:fadeScrollbars" which is set to false to make the thumb image stay permanently.
2. "android:scrollbarStyle" which is set to outsideOverlay to make the thumb image drawn at the "Edge of the view and overlaid" as stated here: android:scrollbarStyle

Now, in order to put the thin line you want under the scroller, simply add an image view containing the line image, to the direct child of the ScrollView (RelativeLayout child as a direct child for the ScrollView will allow you to position the image on the right side of the view - so this is would have been my choice).

and that's it.

Answer 2

Setting android:scrollbarThumbVertical is not the best solution, it will stretch the thumb image according to the list size...

You'd better use android:fastScrollThumbDrawable

Here's an example:

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:fadeScrollbars="false"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:scrollbarSize="0dip"
    android:scrollbarStyle="outsideInset"
    android:fastScrollAlwaysVisible="true"
    android:fastScrollEnabled="false"
    android:scrollbars="vertical" />

Then on the styles.xml AppTheme you add

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:fastScrollThumbDrawable">@drawable/scroller_style</item>
</style>

and on the res/drawable folder you create the file: scroller_style.xml with the content

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

    <item android:drawable="@drawable/scroller_active" android:state_pressed="true"/>
    <item android:drawable="@drawable/scroller"/>

</selector>

where scroller is your thumb image and scroller_active is your active thumb image (optional)