Android RelativeLayout below 2 views

Question

I have a RelativeLayout like this:

<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:layout_alignParentBottom="true"         android:text="Follow"         style="@style/follow_button" /> </RelativeLayout> 

The issue I'm running into is that I want the follow_button to be below both the page_desc as well as the page_image. Sometimes the page_desc content will have a height bigger than the size of the image, sometimes not. The issue is that if I set the follow_button below either the image or the description, then the other one will get clipped. Is there an efficient / effective way to ensure that the image or page_desc are always visible and above the button?

Answer 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> 

Answer 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.