Question

I have a screen with a background image and two buttons at the bottom. I am using code similar to this:

 <?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 android:layout_width="wrap_content"
        android:layout_height="0dip" android:layout_weight="1"
        android:orientation="vertical" android:background="@drawable/mainbg">

    </LinearLayout>

        <ImageButton android:layout_height="wrap_content"
        android:background="#FF000000" android:src="@drawable/button1"
        android:padding="5dp"
        android:id="@+id/ImageButton1" android:layout_width="fill_parent">
    </ImageButton>

    <ImageButton android:src="@drawable/button2" android:background="#FF000000" android:id="@+id/ImageButton2"
        android:layout_width="fill_parent" android:focusable="true" android:saveEnabled="false" android:layout_height="wrap_content">
    </ImageButton>

    <TextView android:text="mywebsite.com" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>

In this code, the background screen is smashed up to fit in the remaining screen space not used by the bottons. in other words, the two button consume 20% of screen space, then the image is smashed into the remaing 80%.

My Question:
Is there a way to make some kind of layering effect so that my buttons are on a layer above the background image?

Answer 1

maybe <RelativeLayout/> will be better than <LinearLayout/> for your design

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

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@drawable/mainbg" >

        <ImageButton
            android:id="@+id/ImageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button1"
            android:layout_above="@id/ImageButton2"
            android:layout_centerHorizontal="true" >
        </ImageButton>

        <ImageButton
            android:id="@+id/ImageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button2"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true" >
        </ImageButton>

    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mywebsite.com" >
    </TextView>

</LinearLayout>