Distributing extra space in RelativeLayout

Question

I'm trying to build a RelativeLayout which distributes excess space between its children, much as shown here:

I've figured out how to center the red widget inside the blue one, but what I also want to do is distribute any excess vertical space evenly above, below, and between the blue and olive widgets. Currently, everything is bunched up at the top.

My XML looks roughly like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    >

    <ImageButton android:id="@+id/blue_button"
        android:src="@drawable/blue_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_alignParentTop="true"
        />
    <ImageView
        android:id="@+id/red_box"
        android:src="@drawable/red_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/blue_button"
        android:layout_marginLeft="10dp"
        android:layout_alignTop="@id/blue_button"
        android:layout_alignBottom="@id/blue_button"
        />

    <ImageButton
        android:id="@+id/green_button"
        android:src="@drawable/green_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/blue_button"
        android:layout_weight="1"
        />

</RelativeLayout>

Answer 1

First, you are using layout_weight with RelativeLayout parent. It's useless because layout_weight works only with LinearLayout parent.

Actually I didn't understand your question (an image of wanted layout would be good) but I guess this will work for you:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    >

   <RelativeLayout
       android:id="@+id/blueAndRedWrapperLay"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       >

       <ImageButton android:id="@+id/blue_button"
           android:src="#00CCFF"
           android:layout_width="300dp"
           android:layout_height="200dp"
           android:layout_weight="1"
           android:layout_centerInParent="true" />

       <ImageView
           android:id="@+id/red_box"
           android:src="#ff0000"
           android:layout_width="100dp"
           android:layout_height="70dp"
           android:layout_centerInParent="true"
           />

       </RelativeLayout>

    <RelativeLayout
        android:id="@+id/greenWrapperLay"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

    <ImageButton
        android:id="@+id/green_button"
        android:src="#669900"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        />

    </RelativeLayout>

</LinearLayout>