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?

you could try to put your page_desc and page_image into a LinearLayout and the follow_button below the LinearLayout? — Sephy, Jul 28 '10 at 18:22
I was hoping to avoid that as it creates extra objects (and thus memory), though I guess if there's no other option i'll have to do that. — Ben, Jul 28 '10 at 18:42
you could enforce both text views to be of certain height. but I would use @Sephy answer. If this is part of ListView of some kind, it should be reused on your getView() call in your Adapter. — bgs, Feb 11 '11 at 18:43
1 linearlayout within a relative layout is not extra memory to worry about believe me. Go look at some open source layouts they'll have a few nested layouts (or unzip any apk). I'd go with that solution for a quick fix then come back to the issue if you have some spare time. — Blundell, Jun 30 '11 at 16:58
I think that avoiding a linear layout is premature optimization. Layouts like this work just fine on a G1. — renam.antunes, Jul 04 '11 at 20:53

score 50 · Accepted Answer · edited Jul 21 '15 at 15:42

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>

??? The point of using RelativeLayout is to AVOID having to nest LinearLayouts. :( — SMBiggs, Jun 09 '12 at 22:14
I don't see a way to solve this case with one RelativeLayout only. You can't define an element to be below 2 other elements. Post another answer if you can solve this problem without nesting ViewGroups. Also, where does it say that avoiding nesting is the purpose of RelativeLayout? It may be used for that in many situations, true, but there are exceptions. — Zsombor Erdődy-Nagy, Jun 10 '12 at 11:08
I was hoping for a more elegant solution, but it seems you are quite right. — SMBiggs, Jun 16 '12 at 06:04

score 8 · Answer 2 · edited Jul 21 '15 at 16:09

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.

sorry guys, i meant to offer the bounty on a different question. my apologies for the confusion. — Ben, Jul 05 '11 at 16:31

score 3 · Answer 3 · edited Jul 21 '15 at 15:32

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>

Aligning to parent's bottom is not general solution but I like it more than adding nested layouts. — Petr Gladkikh, Apr 25 '13 at 06:07

Android RelativeLayout below 2 views

3 Answers3

Linked