Develop Reference

How to make a layout fill the screen vertically but start to grow when content doesn't fit

I wish I had an example to show if it seems confusing, but basically what I want to do is show a bottom toolbar with a Right navigator button (e.g. go to next page) always anchored to bottom of the screen, but if the content on the page (middle section) grows, the toolbar will push down so that you have to scroll to get to it. I know it seems strange, but this is the requirements. What would be the best approach for this?

You can achieve this by combining a ScrollView using android:fillViewport="true" and a vertical LinearLayout that has a Space with android:layout_weight="1" between your content and your navigation bar.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#ccc"/>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#eee"/>
</LinearLayout>
</ScrollView>
That first view is a placeholder for whatever content you want to display, and the second is a placeholder for your navigation bar. You can see that when the first view is short (200dp tall), you get the "content" at the top and the navigation bar at the bottom:
This works because the fillViewport attribute will "stretch" the child LinearLayout to fill the screen, at which point there is "extra" space and the layout_weight attribute on the Space element will consume all that space. (Note that, despite being a ScrollView, you can't actually scroll anything in this state, since the view is stretched to be the exact size of the screen.)
However, when the "content" is tall enough to fill the screen, the fillViewport attribute will have no effect, the LinearLayout won't be stretched, and there won't be any extra space to consume. So, once you scroll to the bottom, your content will fill right up to the edge of the navigation bar:
(Scrolled to the top on the left, and scrolled to the bottom on the right.)

Why does view with layout_marginTop set and gravity=bottom placed inside horizontal LinearLayout cause margin to appear at the bottom?

I've tried to add view with layout_marginTop set and gravity=bottom inside a horizontal LinearLayout and it causes margin to appear at the bottom for no reason.
I'm aware that kind of layout could be build differently but I can't understand why I'm getting such result.
Here is the xml layout:
<?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:background="#ff0000"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="8dp"
android:background="#0000ff"
android:textSize="24sp"
android:text="TEST"/>
</LinearLayout>
And here is the result:
Any ideas with this one?

After digging through the source code, it seems that the root cause of this behavior is the fact that LinearLayout aligns its child Views by their baselines by default. When it measures out the vertical offsets for the child Views, it takes into account the sum of the vertical margins. These offsets are then applied after the "normal" top (y) coordinates are calculated for the child Views.
The upshot of all this is, if you want your TextView aligned right at the bottom, set the LinearLayout's baselineAligned attribute to false.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:background="#ff0000"
android:orientation="horizontal">
...

TextView is set with Its own LAYOUT GRAVITY to bottom, i.e. TextView's whole body is aligned to bottom, it won't make difference if orientation is horizontal, because it is linearLayout it won't work with marginTop when layoutGravity of View is set to Bottom, remove layoutGravity and keep marginTop it will come near to the top with mentioned margin.!
Why it is not on the base.?
because you have given it a margin and when you are giving it some value provided you have given it layoutGravity of Bottom already so it takes the bottom as it base align and gives margin from it.!
Hope i helped you partially if not completely.

Grow LinearLayout inside Scrollview for bigger phones on Android

I have a Scrollview for the complete screen, so in small phones you can scroll and see the complete form.
For big screen/hdpi phones, the screen has enough size so it fits.
The problem is that since its a LinearLayout, all views are at the top, and there is white space at the bottom.
I set the weight on one of the items items inside the linear layout, but it does not grow.
my code:
<ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
HEADER STUFF
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
THIS PART I NEED TO GROW AS MUCH AS POSSIBLE SO THE FOOTER IS AT THE BOTTOM OF THE PAGE.
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/LightBlue"
android:orientation="vertical"
android:paddingBottom="10dp" >
FOOTER STUFF. NEED THIS TO BE AT THE FOOTER IF THE PHONE IS BIG ENOUGH.
</RelativeLayout>
<LinearLayout>
</ScrollView>

Simple answer: In the LinearLayout, change android:layout_height="wrap_content" to android:layout_height="match_parent".
Reason: By wrapping the content, you aren't giving the middle RelativeLayout with the most weight a chance to grow and fill the white space. Changing it to match the parent height gives it its space to blossom, so to speak.
Also, per Indiandroid's comment, you may want to put the ScrollView inside the LinearLayout and around the middle RelativeLayout that hosts the content so that the header and footer are fixed.
EDIT: If you intend to stretch the middle RelativeLayout by using weight in the LinearLayout, you will, after applying my previous part about switching the height to match_parent, have to move to ScrollView inside the LinearLayout around the middle RelativeLayout or it will grow indefinitely. This is because the ScrollView has no vertical bounds and by matching it's height with the LinearLayout, the LinearLayout also has no bounds.

About LinearLayout and how controls resize

Today I have been playing a bit with the LinearLayout and have been suprised with the results:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Big Text"
android:gravity="center_vertical|center_horizontal"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button"
/>
</LinearLayout>
This is a simple layout with a text view header, then a text view that I want it to cover all parent (but the space occupied by the bottom button) and a button that is placed at the botton side with the layout_gravity="bottom".
This produces a layout where header is shown correctly, center text view covers all remaining free space and the button does not appear. Why is this? Shouldn't the center text view just calculate its size taking into account the bottom button size?.

Use layout_weight="1" in your center TextView.

Always remember thumb rule
If you are using linear layout with vertical orientation as soon as it finds the control
with
android:layout_height="match_parent"
The layout will ignore all the controls present below it.
Hope this help
Vipul

In place of this
android:layout_width="match_parent"
android:layout_height="match_parent"
use 'wrap_content' like this
android:layout_width="wrap_content"/"fill_parent"
android:layout_height="wrap_content"/"fill_parent"

Shouldn't the center text view just calculate its size taking into account the bottom button size?.
No, because you tell the second TextView to match its parent's height, thus FILL_PARENT and hence it will fill up all remaining space, leaving none for the last TextView.
(...) and a button that is placed at the botton side with the layout_gravity="bottom".
Unfortunately, that's not how a LinearLayout works. If you set the orientation to vertical, basically only the left and right gravities will have effect. Vice versa, with the (default) horizontal orientation, only top and bottom work. The orientation determines in which direction the View children are dynamically positioned in order, which implies you cannot manually change the 'position' in that direction.
Now, to get the desired effect, you can give the second TextView a height of 0dp and a weight of 1, resulting in it dynamically filling up all remaining space without pushing the third TextView off the bottom. Alternatively, you can use a RelativeLayout, with which you can directly set the position, and simply instruct the middle TextView to sit below the first, but above the last.

Getting Views to fit

I have a main.xml with a LinearLayout with three items inside, LinearLayout, ListView and LinearLayout. I would like the ListView to be as big as possible while keeping the bottom LinearLayout always showing and not shrunk or knocked off the screen.
I have tried making the ListView height fillparent, but then the bottom LinearLayout doesn't show up, same with wrapcontent, since the ListView has lots of content.
When I make the ListView a set size, say 300dp, I have space below the bottom LinearLayout. I tried to fix this by making the top level LinearLayout gravity=fill, but that didn't help.
Also, depending on the android I try it on, the bottom LinearLayout will drop off the screen, or get shrunk.
In case it's relevant, the top level LinearLayout is set to fillparent for height.
My goal is to keep the top and bottom LinearLayout to wrap their content, and the middle ListView fill what's left... any suggestions?
Thanks in advance for your efforts!

I believe you can just add android:layout_weight="1" to the ListView, with the ListView set to a height of fill_parent, and the two LinearLayouts set to wrap_content. Regardless, I usually prefer to use a RelativeLayout. You can specify the header to align to the top of the screen, the footer to align to the bottom, and the ListView to fill the space in between, like so:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
//...insert stuff here
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
//...insert stuff here
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
/>
</RelativeLayout>