android ListView scrollbarStyle
-
05-05-2021 - |
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
La solution
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...
Autres conseils
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)
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