Custom scrollbar Android

Question

How I can make this scrollbar:

this will help you http://stackoverflow.com/questions/8355984/can-we-have-a-custom-scrollbar-on-an-scrollview & Second is http://stackoverflow.com/questions/4485170/android-scrollbar-with-a-extra-view-screenshot-included — Dixit Patel, Jan 05 '13 at 12:41

score 32 · Accepted Answer · answered Jan 23 '13 at 19:20

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:

"android:fadeScrollbars" which is set to false to make the thumb image stay permanently.
"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.

Just add a style tag in the ScrollView xml element with your custom style: style="@style/my_custom_style" (you can also do it from the layout editor) — Daniel L., Oct 27 '13 at 08:47
About the line under the scroller: isn't android:scrollbarTrackVertical for that? — Petko Petkov, Mar 21 '15 at 14:57

score 11 · Answer 2 · answered Dec 04 '13 at 20:24

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)

@SweetWisherツ, maybe setting 'android:fadeScrollbars="false"' as 'true' in ListView properties ? Can you try this ? — Bruno, Sep 03 '15 at 15:12

Custom scrollbar Android

2 Answers2

Linked