How to do this layout? (Link on Image)

Question

Hi all,

I was wondering how to obtain this result :

http://img718.imageshack.us/img718/6173/screenshot20100411at126.png

This is what I tried :

<RelativeLayout android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:background="#CCCCCC"
                  android:orientation="horizontal"
                  android:layout_weight="0">

        <Button android:id="@+id/btn_cancel"
                android:text="@string/cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5px"
                android:gravity="left"
                />

        <Button android:id="@+id/btn_save"
                android:text="@string/save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5px"
                android:layout_toRightOf="@id/btn_cancel"
                android:gravity="right"/>
    </RelativeLayout>

I tried to play with the layout_width properties and setting them up to fill parents both of them but did not work, if anyone has an idea ... Thank you !

Answer 1

<LinearLayout android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:padding="5dip"
              android:background="#CCCCCC"
              android:orientation="horizontal">

    <Button android:id="@+id/btn_cancel"
            android:text="@string/cancel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dip"
            android:layout_weight="1"/>

    <Button android:id="@+id/btn_save"
            android:text="@string/save"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
</LinearLayout>

The trick in a LinearLayout to get two widgets to take up the same amount of space is to set layout_width="fill_parent" on both of them, and then set layout_weight="1" on both of them as well. Setting both to fill_parent and the same layout_weight will tell the LinearLayout to split all available space between the two.

Also, use dip, instead of px. dip is screen-size independent, and will look better on screens of differing sizes.