match_parent property for children in a RelativeLayout

Question

In short, is it possible to tell a child in a RelativeLayout to always match the height of that RelativeLayout regardless of how other children in that same RelativeLayout behave? In short, that's it. Details below.

What I'm trying to achieve is a ListView row with at least three views, and one of those views would be kind of a stripe at the right side of the list entry (the red view below). The problem I'm having is that there is a TextView at the left side, and depeding on how much text I have, the stripe won't fill the whole layout. This is very clearly explained by images below.

ListView item layout:

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

<View
        android:id="@+id/bottom_line"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_alignParentBottom="true"
        android:background="#fc0" />

<!-- Why match_parent does not work in view below? -->
<View
        android:id="@+id/stripe"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:background="#f00" />

<TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/stripe"
        android:text="This is a very long line, meant to completely break the match_parent property of the box at right"
        style="?android:textAppearanceLarge"/>

</RelativeLayout>

Result:

Setting stripe and root height to match_parent makes no difference. I did it.

Repeating the question, I want the red stripe to always fill the parent vertically. You can see stripe is not aligning to the top of root.

A note: the above example is the simplest, self-contained example I can think of. It's just a ListActivity with an anonymous ArrayAdapter populated by a static String array. The relevant code in onCreate is at most 8 lines, so no worries there. It's really the layout. Besides, I have this working with nested LinearLayouts already, but I'm trying to reduce the depth of my layout structure a bit, if possible. LinearLayout works fine, as expected.

Answer 1

I had the same requirement and my solution was to align the top of the red stripe to the parent's top, and the bottom of the stripe to the bottom of the text view on the left. The height in this case becomes irrelevant. You can either use wrap_content or match_parent.

Answer 2

Simply put your main RelativeLayout inside a LinearLayout, then the calculation of child Views height will be correct . I had the same problem and it worked for me.

Answer 3

Try this:

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

    <View
        android:id="@+id/stripe"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/text"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/text"
        android:background="#f00"
        android:minHeight="50dp"/>

    <TextView
        android:id="@+id/text"
        style="?android:textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/stripe"
        android:text="This is a very long line, meant to completely break the match_parent property of the box at right"/>

    <View
        android:id="@+id/bottom_line"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@id/text"
        android:background="#fc0"/>

</RelativeLayout>

The align top and bottom of the red view is the same as textview now.

Answer 4

It's an annoying problem and you need to put the RelativeLayout inside a LinearLayout

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minHeight="40dp"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <RelativeLayout
                android:id="@+id/deleteItem"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:clickable="true"
                android:background="@color/background_grey"
                >
                <TextView
                    style="@style/SmallButtonFont"
                    android:layout_marginRight="12dp"
                    android:layout_centerInParent="true"
                    android:text="CLEAR"
                    android:textColor="@color/globalRedLight" />
            </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Answer 5

Add listener to list item holder so every time when holder change height, set that height to a child. i1 is for top, and i3 is for bottom.

parent.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
        @Override
        public void onLayoutChange(View view, int i, int i1, int i2, int i3, int i4, int i5, int i6, int i7) {
            child.setTop(i1);
            child.setBottom(i3);
        }
    });