Android layout overlapping

Question

I have a group of buttons at the top, and group of buttons at the bottom, and I want the WHOLE middle space for the imageview to display images. But the problem is the image overlaps with the group of buttons at the bottom. I tried changing weigths, used 0dp, rearrange layouts.. but nothing works.

Here is my xml,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/relativeLayout1"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/topButtons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/questionBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="20dp"
            android:text="Question" />

        <Button
            android:id="@+id/solutionBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="20dp"
            android:text="Solution" />

        <Button
            android:id="@+id/resetBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="20dp"
            android:text="Reset" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center" />
</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingLeft="5dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/btnA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/choice_button"
            android:text=" A " />

        <Button
            android:id="@+id/buttonB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" B " />

        <Button
            android:id="@+id/buttonC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" C " />

        <Button
            android:id="@+id/buttonD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" D " />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next" />
    </LinearLayout>
</RelativeLayout>

Answer 1

Copy and paste ,

       <?xml version="1.0" encoding="utf-8"?>
         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
        android:layout_height="fill_parent"
      android:gravity="center_horizontal"
          android:orientation="vertical" >

<LinearLayout
    android:id="@+id/topButtons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/questionBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="20dp"
        android:text="Question" />

    <Button
        android:id="@+id/solutionBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="20dp"
        android:text="Solution" />

    <Button
        android:id="@+id/resetBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="20dp"
        android:text="Reset" />
</LinearLayout>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/topButtons"
    android:layout_above="@+id/belowbutons"
    android:scaleType="center" />

<RelativeLayout
    android:id="@+id/belowbutons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingLeft="5dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/btnA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/choice_button"
            android:text=" A " />

        <Button
            android:id="@+id/buttonB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" B " />

        <Button
            android:id="@+id/buttonC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" C " />

        <Button
            android:id="@+id/buttonD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" D " />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next" />
    </LinearLayout>
</RelativeLayout>

Answer 2

Cleaned your xml a little. It can be still be improved but this will do the trick. Set ids for your top and bottom layouts and set your ImageView to be below the top and above the bottom.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >

   <LinearLayout
       android:id="@+id/topButtons"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal" >

       <Button
           android:id="@+id/questionBtn"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:minHeight="20dp"
           android:text="Question" />

       <Button
           android:id="@+id/solutionBtn"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:minHeight="20dp"
           android:text="Solution" />

       <Button
           android:id="@+id/resetBtn"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:minHeight="20dp"
           android:text="Reset" />
   </LinearLayout>





    <LinearLayout
        android:id="@+id/rlBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true">

        <Button
            android:id="@+id/btnA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff0000"
            android:text=" A " />

        <Button
            android:id="@+id/buttonB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" B " />

        <Button
            android:id="@+id/buttonC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" C " />

        <Button
            android:id="@+id/buttonD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" D " />

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next" />

    </LinearLayout>






<ImageView
        android:layout_below="@+id/topButtons"
        android:layout_above="@+id/rlBottom"
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center" />
</RelativeLayout>