RelativeLayout, align a view at the bottom of another view but always below another

Question

I am going mad with a layout problem, based on the following image

The image represents a RelativeLayout. I need the blue view to be aligned with the bottom of the black one. BUT, if the black view is shorter than the sum of the red one and the blue one, I need the blue view to be below the red one. I want to have this result:

I tried with the following xml:

<RelativeLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <View
        android:id="@+id/blackView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:align_parentTop="true"
        android:align_parentLeft="true"/>
    <View
        android:id="@+id/redView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:align_parentTop="true"
        android:align_parentRight="true"
        android:layout_toRightOf="@+id/blackView"/>
    <View
        android:id="@+id/blueView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/blackView"
        android:layout_below="@+id/redView"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

but it seems that the layout_alignBottom has a higher priority over the layout_below. I also tried to set the blueView aligned with the bottom of its parent but the result is that the parent (having a wrap_content height) become high as its own parent (the whole screen height).

Does anyone had the same problem?

Answer 1

Use this.

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

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

    <View
        android:id="@+id/blackView"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5" >

        <View
            android:id="@+id/redView"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentTop="true"
            android:background="#FF0000" />

        <View
            android:id="@+id/blueView"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:background="#003CFF" />
    </RelativeLayout>
</LinearLayout>

</LinearLayout>

Answer 2

Solved!

<LinearLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="100dp"
    android:orientation="horizontal" >

    <View
        android:id="@+id/blackView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

        <View
            android:id="@+id/redView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|right" >

            <View
                android:id="@+id/blueView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

The trick is that android:gravity="bottom|right". Thanks for the help!