How to properly use "layout_gravity" for Android UIs?

Question

I want to write a small Android app with a GUI that should display an image on the top of the (portrait) screen, directly below a TextView that might contain some info text (or simply is blank/empty), and at the bottom of the screen a button. So in between the (empty) Textview (below the image on top) and the button should be "maximum" empty space, depending on the screen size of the devive.

So, in other words: the group of image and TextView should float on top of the screen, the bottom should float on the bottom of the screen, with a dynamic amount of empty space in between.

So I ended up with this layout XML:

<?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" >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/curr_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|top"
        android:layout_margin="6dip" />

    <TextView
        android:id="@+id/image_info_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button"
        android:text="@string/rate_button_text"
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_margin="6dip" />

</LinearLayout>

</LinearLayout>

However, with this layout everything floats on the top of the screen, the button is not rendered to the bottom of the screen, as described above.

Any ideas what I am doing wrong here? Thanks in advance for your help!

score 1 · Accepted Answer · answered Jun 25 '12 at 21:41

1

Try changing the layout you want on the bottom to this:

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical" >

also note that you only need this:

xmlns:android="http://schemas.android.com/apk/res/android"

In the very first item of the xml file. You should remove it from all of your layouts except for the first one in the file.

answered Jun 25 '12 at 21:41

FoamyGuy

46,603
18
125
156

thanks -- I ended with a RelativeLayout though, as described here: http://stackoverflow.com/questions/2386866/how-to-align-views-at-the-bottom-of-the-screen – Matthias Jun 25 '12 at 22:05
that is a good choice. RelativeLayout is far more flexible, you'll be able to achieve more complex much easier with Relative than with linear. – FoamyGuy Jun 25 '12 at 23:47

How to properly use "layout_gravity" for Android UIs?

1 Answers1