android ListView scrollbarStyle

Question

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

Android scrollBarStyle settings visualized

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)

Leave a Comment Cancel reply