Custom scrollbar Android

Question

How I can make this scrollbar:

Answer 1

This perfect example guides you through the solution.

I've picked the main parts for fast use. if anyone needs more details, check the full article.

Vertical ScrollBar Track Drawable

Create a new file res/drawable/scrollbar_vertical_track.xml and copy paste the following content. This file defines shape for scrollbar track.

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

    <gradient
        android:angle="0"
        android:endColor="#9BA3C5"
        android:startColor="#8388A4" />

    <corners android:radius="6dp" />

</shape>

Vertical ScrollBar Thumb Drawable

Create a new file res/drawable/scrollbar_vertical_thumb.xml and copy paste the following content. This file defines shape for scrollbar thumb.

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

    <gradient
        android:angle="0"
        android:endColor="#005A87"
        android:startColor="#007AB8" />

    <corners android:radius="6dp" />

</shape>

• These drawable allows to set the shape, color of track and thumb of scrollbar respectively.
• Here, we create a rounded track and thumb of scroll bar by providing radius atribute for .

styles.xml

Create the following style and apply it to the ScrollView. Open res/values/styles.xml and edit to have the content as shown below.

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="scrollbar_shape_style">
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:scrollbarStyle">outsideOverlay</item>
        <item name="android:scrollbars">vertical</item>
        <item name="android:fadeScrollbars">true</item>
        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item>
        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item>
        <item name="android:scrollbarSize">12dp</item>
        <item name="android:scrollbarFadeDuration">2000</item>
        <item name="android:scrollbarDefaultDelayBeforeFade">1000</item>
    </style>

</resources>

Applying the custom style to the ScrollView:

We apply the style scrollbar_shape_style to the ScrollView which uses shape drawable.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/scrollbar_shape_style"
    ...
       >

...
</ScrollView>

Answer 2

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 3

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)