android ListView scrollbarStyle
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 areaoverlay
- the scrollbar overlays the right edge of the section it's ininset
- 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)
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...
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