Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android ListView scrollbarStyle

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

like image 411
Ben Avatar asked Jun 23 '10 15:06

Ben


2 Answers

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) 
like image 77
Scott Stanchfield Avatar answered Sep 21 '22 00:09

Scott Stanchfield


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...

Screenshot for the View Scrollbar styles

like image 25
Vijay C Avatar answered Sep 25 '22 00:09

Vijay C