I have a weird issue with a ScrollView in my layout, which is that it cuts off the bottom of the TableLayout within.
Here's what it looks like when scrolling to the top.
The green background with the rounded corners should be the same for the bottom, i.e. it's really just a plain rectangle drawable with rounded corners. But when I try to scroll to the bottom, here's what I see:
As you see, the bottom corners are invisible, I can't scroll any further. Now, I only see all lines of the Comments section because I manually added some android:paddingBottom to the TableLayout (see below), otherwise more would be cut off. And I just cannot figure out, what the problem is.
Can somebody tell me what I'm missing? Here is the XML layout. It is populated by a database query at runtime.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/table"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/some_shape"
android:paddingBottom="40dp" >
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/code_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Code:" />
<TextView
android:id="#+id/code_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/name_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Name:" />
<TextView
android:id="#+id/name_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/pra_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Type:" />
<TextView
android:id="#+id/pra_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/day_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Day:" />
<TextView
android:id="#+id/day_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/room_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Room:" />
<TextView
android:id="#+id/room_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/time_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Time:" />
<LinearLayout android:orientation="horizontal" >
<TextView
android:id="#+id/time_field1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="#string/to" />
<TextView
android:id="#+id/time_field2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test2" />
</LinearLayout>
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/comment_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Comments:" />
<TextView
android:id="#+id/comment_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
</TableLayout>
</ScrollView>
I know it's too late, but the answer is remove android:layout_margin="30dp" from TableLayout
Related
I have problem with my TextView, when something is written in it. It narrows the right layout.
like here:
1 Without something is written: http://i.stack.imgur.com/zItJw.jpg
2.Without something is written in: http://i.stack.imgur.com/b5Nb4.jpg
My Layout Code:
1st bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/dzialanie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="X razy Y" />
<TextView
android:id="#+id/equal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="=" />
<TextView
android:id="#+id/tylemabyc"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
2nd bar
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/czas"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
3rd bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/wynik"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
How to block 1st TextView to not narrows others ?
You can use layout_weight property to tell android how much space each textView takes on the screen. If you want all of them to have the same space you can add the layout_weight of 1 for all of them.
You will also need to readjust your layout_width too. You will have to trade off for the layout_heght. For example if i want 4 textviews in a horizontal line holding equal space "Horizontally" i would do something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="This is verrry long text" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="maybe not" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="let us see" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ok" />
I am trying to do my first complex GUI, but now i can't to solve this problem.
The first column of the first two rows only needs to contain the label, while the second column of the first two rows must occupy the remaining space.
In this snapshot the problem that i noticed is that the first column is larger than i would like.
This is the piece of code that implements that piece of layout.
...
...
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/linear_layout_background"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" >
<TextView
android:id="#+id/textViewPlateValueLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plateValue"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/productID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:ems="5"
android:text="#string/blank"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" >
<TextView
android:id="#+id/ztlLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ztl"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/ztlShow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:text="#string/blank"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center" >
<TextView
android:id="#+id/isAllowed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/blank"
android:background="#drawable/back"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
...
...
In addition, since they are really impractical, I would like to ask you some advice on the best approaches to use than this.
You can try using layout_weight like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context=".MainActivity" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#ff00ff"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<TextView
android:id="#+id/textViewPlateValueLabel"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Label1:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/productID"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#00ff00"
android:ems="5"
android:text="Some Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<TextView
android:layout_weight="3"
android:id="#+id/ztlLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Label2:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_weight="7"
android:id="#+id/ztlShow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="Some Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center" >
<TextView
android:id="#+id/isAllowed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"
android:background="#0088ff"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</LinearLayout>
I wouldn't use TableLayout, if I were you. I'd probably use LinearLayout or RelativeLayout. You can get the same effect with some of the XML attributes. This is akin to using HTML's table attribute vs. using divs to simulate tables.
So, instead of a table, you can have LinearLayout inside of LinearLayout to simulate a table.
Although canDroid, could be sufficient to some of us, it didn't worked for me, I tried all kind of tricks to make the TableLayout to work. I found LinearLayout much easier to use, here is an example of TableLayout "like" layout using LinearLayout, few cells with a thumbnail, and few without.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="94dp"
android:layout_margin="5dp"
android:text="#string/nut1" />
</LinearLayout>
<View
android:layout_width="395dp"
android:layout_height="2dp"
android:background="#color/colorPrimary"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:layout_width="94dp"
android:layout_height="94dp"
android:adjustViewBounds="false"
android:background="#drawable/one"
android:contentDescription="#string/nut3"
android:cropToPadding="false"
android:saveEnabled="false"
android:scaleType="center" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="94dp"
android:layout_margin="10dp"
android:text="#string/nut3" />
</LinearLayout>
</LinearLayout>
Below there are two row views .......... How to leave a space between them i mean blank space between Views
What code do i need to add between the rows
I am not speaking abot padding between the rows, ......... I am
trying to achieve Blank space between
I am trying to achieve this in relative layout not grid layout
Any Ideas
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
Just make your table-row like this, you can leave any space you need:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editText2"
android:gravity="center"
android:padding="2sp" >
<!-- HERE IS THE THING YOU NEED -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
</LinearLayout>
</LinearLayout>
<!-- MAKE SPACE AS MUCH AS YOU WANT, 20DP FOR EXAMPLE -->
</TableRow>
Hope this helps.
Use Space view between them like this
<Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/mainListView"
android:layout_alignParentBottom="true"
android:layout_marginBottom="150dp" />
You can use LinearLayout as well:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".SecondActivity" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</LinearLayout>
I think what you need are margins like android:layout_marginTop="10dp". Because in your code you already use padding, so I assume you know what happens if you use it. A margin will add some room around your View, depends on which margin you will use.
Try this:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp"
android:marginBottom="10dp"
>
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
Being new to android I am still learning the intricacies of layouts. I am trying to create a simple bar on top of a map. For the most part this works fine.
My issue is that I want everything to be right aligned except for the Button which I want left aligned. I have tried quite a few combinations and am unable to get desired layout.
This is beginning to make me believe my structure as a whole is not correct. This seems like there should be an easy fix. What am I missing??
<LinearLayout
android:id="#+id/transparent_panel_hud"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right">
<Button
android:text="View"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/arrow_down"
android:textSize="10sp"
android:drawablePadding="3dp"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingRight="15dp" >
<TextView
android:id="#+id/latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:text="#string/default_latitude"
android:textSize="18sp" />
<TextView
android:id="#+id/longitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="#string/default_longitude"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingRight="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/speed"
android:textSize="18sp" />
<TextView
android:id="#+id/speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/default_speed"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingRight="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/heading"
android:textSize="18sp" />
<TextView
android:id="#+id/heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/default_heading"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>![screenie][1]
Do the following changes to your XML layout, you will get the output as you mentioned. Try this.
Remove the line android:gravity="right" in LinearLayout with id=transparent_panel_hud
Keep your Button in a LinearLayout as below.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left" >
<Button ... as you like />
</LinearLayout>
Keep your remaing 3 vertical LinearLayouts in a LinearLayout as below.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right" >
<LinearLayout vertical 1 ... as you like />
<LinearLayout vertical 2 ... as you like />
<LinearLayout vertical 3 ... as you like />
</LinearLayout>
I tested above changes to your code, its working. You too check it and let me know the result.
Try this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/transparent_panel_hud"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="View"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_alignParentLeft="true"
android:drawablePadding="3dp"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/rightlayout"
android:layout_alignParentRight="true"
android:paddingRight="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="heading"
android:textSize="18sp" />
<TextView
android:id="#+id/heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="default_heading"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/rightlayout"
android:orientation="vertical"
android:paddingRight="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="speed"
android:textSize="18sp" />
<TextView
android:id="#+id/speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="default_speed"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
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
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)
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