Search code examples
androidandroid-relativelayout

Android RelativeLayout below 2 views


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?


Solution

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