RelativeLayout wrap_content not respecting non-anchor view

Question

I have a relative layout, looks something like the following

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/profile_pic"
        android:layout_width="@dimen/small_size"
        android:layout_height="@dimen/small_size"
        android:layout_alignParentLeft="true"
        android:src="@drawable/some_image" />

    <ImageView
        android:id="@+id/extra_pic"
        android:layout_width="@dimen/large_size"
        android:layout_height="@dimen/large_size"
        android:layout_alignBottom="@id/profile_pic"
        andorid:layout_toRightOf="@id/profile_pic" />

</RelativeLayout>

I need to keep this as a relative layout as the original layout file looks more complex than this.

The viewGroup's height only wraps the profile_pic height, and since the extra_pic height is larger, it gets cut off. How can I get the relativeLayout to wrap_content so that it wraps the Largest item in the layout?

What I want it to look like:

What it's like at the moment

Answer 1

It looks like this is a limitation of RelativeLayout. There is definitely quirkiness whenever you use wrap_content to define the size of a RelativeLayout. If you dig into the source code, it appears that the height of the container is determined by the maximum value for bottom of any of the child views. Since your larger view is aligned to the bottom of your smaller view, the larger view's bottom is the same as the smaller view's bottom, so the height of the container does not get extended.

Without seeing your full layout, I can't give you an exact solution, but you might try something like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/spacer"
        android:layout_width="@dimen/large_size"
        android:layout_height="@dimen/large_size"
        android:visibility="INVISIBLE" />

    <ImageView
        android:id="@+id/profile_pic"
        android:layout_width="@dimen/small_size"
        android:layout_height="@dimen/small_size"
        android:layout_alignBottom="@id/spacer"
        android:layout_alignParentLeft="true"
        android:src="@drawable/some_image" />

    <ImageView
        android:id="@+id/extra_pic"
        android:layout_width="@dimen/large_size"
        android:layout_height="@dimen/large_size"
        android:layout_alignBottom="@id/profile_pic"
        android:layout_toRightOf="@id/profile_pic" />

</RelativeLayout>

The invisible spacer view takes up the larger height and then the other components are aligned off of the spacer. This should cause the RelativeLayout to give you the proper height.