Layout Question. How can I layout 1 image view on top, 1 image on bottom

Question

Hi,

I have a vertical LinearLayout. I would like to layout 1 ImageView on top and 1 ImageView at the bottom of that LinearLayout. I tried putting 'android:gravity="top"' and 'android:gravity="bottom"' in each of the ImageView, but both ImageView appears at the top of the LinearLayout. Is there a way to fix it?

Thank you.

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

   <ImageView
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:gravity="top" />

   <ImageView
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:gravity="bottom" />
   </LinearLayout>

Answer 1

The easiest way to do this is with RelativeLayout. Replace your LinearLayout with RelativeLayout and change the first ImageView to use android:layout_alignParentTop="true" and the second one to use android:layout_alignParentBottom="true".

Answer 2

I agree with Erich WRT using a RelativeLayout. However, if you DO want to use a LinearLayout you should just need to tell it to "linearly" align thing vertically, instead of horizontally. You had the bit in there (android:orientation="vertical") so you should be able to drop the gravitys... this should work:

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

    <ImageView
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon" />

    <ImageView
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon" />
</LinearLayout>

If, instead, you're trying to make the layout take up the whole screen and have one image at the top of the screen and one at the bottom you'll need something more like (untested):

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

    <ImageView
        android:id="@+id/button1"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:src="@drawable/icon" />

    <ImageView
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon" />
</LinearLayout>

This basically tells it to stretch the first one to fill the parent while leaving enough room for the second to wrap it's content.