android ListView scrollbarStyle

Question

Does anyone know of any documentation on the android:scrollbarStyle? I'd like to see examples of each of the 4 values w/ screenshots if possible. I see the difference between outside & inside types, but what are the Inset & Outset parts all about? I dont seem to see a difference between insideOutset & insideInset for example, likewise, I don't see a difference between outsideOutset & outsideOutset.

thanks in advance! Ben

Answer 1

There are no values like outsideOutset and insideOutset. Possible four values are insideOverlay, insideInset, outsideOverlay, outsideInset
the documentation is there at following two links...

http://developer.android.com/reference/android/view/View.html#attr_android:scrollbarStyle

http://developer.android.com/reference/android/view/View.html#SCROLLBARS_INSIDE_INSET

I couldn't understand the documentation properly. So taking reference from ApiDemos Scrollbar demo, I tried this. But i found that there is no difference in insideInset and outsideOverlay.
These two values are diff, either it should have both as Inset or Overlay

updated scrollbar3.xml is

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ScrollView
    android:id="@+id/view1"
    android:layout_width="100dip"
    android:layout_height="120dip"
    android:padding="8dip"
    android:scrollbarStyle="insideOverlay"
    android:background="@android:color/white"
    android:overScrollMode="never">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:background="@android:color/darker_gray"
        android:text="@string/scroll_text" />
</ScrollView>

<ScrollView
    android:id="@+id/view2"
    android:layout_width="100dip"
    android:layout_height="120dip"
    android:padding="8dip"
    android:scrollbarStyle="insideInset"
    android:background="@android:color/white"
    android:overScrollMode="never">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:background="@android:color/darker_gray"
        android:text="@string/scroll_text" />
</ScrollView>

<ScrollView
    android:id="@+id/view3"
    android:layout_width="100dip"
    android:layout_height="120dip"
    android:padding="8dip"
    android:scrollbarStyle="outsideOverlay"
    android:background="@android:color/white"
    android:overScrollMode="never">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:background="@android:color/darker_gray"
        android:text="@string/scroll_text" />
</ScrollView>

<ScrollView
    android:id="@+id/view4"
    android:layout_width="100dip"
    android:layout_height="120dip"
    android:padding="8dip"
    android:scrollbarStyle="outsideInset"
    android:background="@android:color/white"
    android:overScrollMode="never">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:background="@android:color/darker_gray"
        android:text="@string/scroll_text" />
</ScrollView></LinearLayout>

I hope someone will see this and clarify...

Answer 2

Here's a little more detailed example. I set up background colors to make it more obvious what's going on here.

First, the colors:

• black - margins
• white - padding
• gray - the contents of the scrollview
• green - the scrollbar if it takes up its own space (I added this explicitly as a scrollbarTrackVertical for the two "inset" examples)

Let's define two sections:

• "content area" - the stuff to be displayed in the scroll view
• "padding" - the space around the content of the scroll view

Let's think about the two parts of the scrollBarStyle separately:

• inside - the scrollbar appears inside the content area (the padding wraps around both the content and the scrollbar)

• outside - the scrollbar appears outside the content area

• overlay - the scrollbar overlays the right edge of the section it's in

• inset - the scrollbar pushes the section it's in to the left, taking up its own space

The layout xml appears below

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    >

    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbarStyle="insideOverlay"
        android:background="#fff"
        android:fadeScrollbars="false"
        android:layout_margin="8dp"
        android:padding="16dp" >
            <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#aaa" >
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
                <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideOverlay"/>
            </LinearLayout>
    </ScrollView>

    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbarStyle="insideInset"
        android:background="#fff"
        android:scrollbarTrackVertical="@drawable/green_block"
        android:fadeScrollbars="false"
        android:layout_margin="8dp"
        android:padding="16dp" >
    
        <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#aaa" >
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="insideInset" />
        </LinearLayout>
    
    </ScrollView>
    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbarStyle="outsideOverlay"
        android:background="#fff"
        android:fadeScrollbars="false"
        android:layout_margin="8dp"
        android:padding="16dp" >
    
        <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#aaa" >
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideOverlay" />
        </LinearLayout>
    
    </ScrollView>
    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#fff"
        android:layout_weight="1"
        android:scrollbarStyle="outsideInset"
            android:scrollbarTrackVertical="@drawable/green_block"
        android:fadeScrollbars="false"
        android:layout_margin="8dp"
        android:padding="16dp" >
    
        <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#aaa" >
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
            <TextView android:textSize="32sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="outsideInset" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

To set the scrollbar style programmatically:

setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)
setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET)
setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY)
setScrollBarStyle(View.SCROLLBARS_OUTSIDE_INSET)

Answer 3

Above answers didn't quite work for me, so I came up with the following:

If this is what you want to achieve, here it goes:

ListView:

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarStyle="outsideOverlay"
    android:scrollbarThumbVertical="@drawable/scrollbar" />

Scrollbar drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
     xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/transparent"
        android:width="20dp"/>
    <item
        android:drawable="@android:color/holo_red_dark"
        android:right="18dp" />
</layer-list>

Thanks to this answer