Android RelativeLayout below 2 views

Solution 1:

Here you go:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/single_row"
    android:padding="12dip">

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

        <ImageView
            android:id="@+id/page_image"
            android:layout_marginRight="6dip"
            android:layout_width="66dip"
            android:layout_height="66dip"
            android:layout_alignParentLeft="true"
            android:src="@drawable/no_photo" />
        <TextView
            android:id="@+id/page_name"
            style="@style/pulse_content"
            android:layout_alignTop="@id/page_image"
            android:layout_toRightOf="@id/page_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/page_desc"
            android:layout_below="@id/page_name"
            style="@style/pulse_content"
            android:layout_alignLeft="@id/page_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Principal Consultant" />
    </RelativeLayout>

    <Button
        android:id="@+id/follow_button"
        android:layout_marginTop="15dip"
        android:text="Follow"
        style="@style/follow_button" />
</LinearLayout>

Solution 2:

The answer here requires very little change. You had most of your layout correct, however, there is one option messing everything up. AlignParentXXXX will often take a "false" priority over your LayoutXXXX options. So, by setting your Button to AlignParentBottom, you are telling the RelativeLayout that the Button's size is not calculated in the parent layout size.

You may resolve the issue by simply removing AlignParent="true" from your Button. The result code is below and tested. This solution keeps in line with your desires, I believe.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <ImageView
        android:id="@+id/page_image"
        android:layout_marginRight="6dip"
        android:layout_width="66dip"
        android:layout_height="66dip"
        android:layout_alignParentLeft="true"
        android:src="@drawable/no_photo" />
    <TextView
        android:id="@+id/page_name"
        style="@style/pulse_content"
        android:layout_alignTop="@id/page_image"
        android:layout_toRightOf="@id/page_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/page_desc"
        android:layout_below="@id/page_name"
        style="@style/pulse_content"
        android:layout_alignLeft="@id/page_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Principal Consultant" />
    <Button
        android:id="@+id/follow_button"
        android:layout_below="@id/author_image"
        android:layout_marginTop="15dip"
        android:text="Follow"
        style="@style/follow_button" />
</RelativeLayout>

I ran into many similar issues with AlignParent when WrapContent was on the Parent. Top and Bottoms positioning creates undesired behavior if not prepared for it. I find, in general, it is best to use only one or the other (if at all) and line up the rest above or below that.

Solution 3:

Since everything is interdependent in the RelativeLayout it is irrelevant what order you place it in, but it does matter if you are trying to access one view before its created. For example, using the android:layout_below attribute is not exactly what you wanted for the Button. If you set the other views android:layout_above the button it would make the views always above it.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <Button
        android:id="@+id/follow_button"
        android:layout_marginTop="15dip"
        android:layout_alignParentBottom="true"
        android:text="Follow"
        style="@style/follow_button" />
    <ImageView
        android:id="@+id/page_image"
        android:layout_above="@id/follow_button"
        android:layout_marginRight="6dip"
        android:layout_width="66dip"
        android:layout_height="66dip"
        android:layout_alignParentLeft="true"
        android:src="@drawable/no_photo" />
    <TextView
        android:id="@+id/page_name"
        android:layout_above="@id/follow_button"
        style="@style/pulse_content"
        android:layout_alignTop="@id/page_image"
        android:layout_toRightOf="@id/page_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/page_desc"
        android:layout_above="@id/follow_button"
        android:layout_below="@id/page_name"
        style="@style/pulse_content"
        android:layout_alignLeft="@id/page_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Principal Consultant" />
</RelativeLayout>