Android RelativeLayout below 2 views
AndroidAndroid RelativelayoutAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
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 - Android
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 - Android
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>