Android relative layout, right align a textview below another textview

Question

I've been struggling with this problem in layout for sometime now. To make things simpler, I've a screenshot.

enter image description here

I want to right align that textview which has content "3 hours ago" to the right. For this TextView I've layout_below property set to the Linearlayout above(contains two textviews which has contents 36.90 & deg celius as in the picture).

I tried android:layout_alignRight="@+id/rl1", It aligns the textview to the right. But when the content of hours ago TextView is bigger than that above, It get clipped off().

Someone, Please help me.

Here's code( not the whole code). just the part on the right side

<RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            >
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:id="@+id/rl1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/subVitalValueTextView"
                    android:gravity="center_vertical"
                    android:text="5.05"
                    android:textSize="22dp"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/subVitalUnitTextView"
                    android:text="feet"
                    android:paddingLeft="5dp"/>
            </LinearLayout>
            <TextView
                android:layout_marginTop="-6dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/subVitalTimeAgoTextView"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="5 hours ago"
                android:fontFamily="sans-serif-thin"
                android:layout_below="@+id/rl1"/>
</RelativeLayout>

Have you tried using parrentAlignRight=true and layoutBelow= your green text — IshRoid, May 14 '15 at 10:06
Yes, when I give align parent right, textview containing text Body Temperature " become invisible — Drunken Daddy, May 14 '15 at 10:08
What a messy layout! You should really trim down the layout nesting... And use **compound drawables** for TextViews instead of using ImageViews. The key word is: **simplify**. For better performances. `A single RelativeLayout is enough. No need to add dozens of LinearLayouts inside and outside it`. — Phantômaxx, May 14 '15 at 10:39

Murtaza Khursheed Hussain · Accepted Answer · 2015-05-14T10:34:54.183

Try the following

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/subVitalImageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="14dp"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@+id/subVitalImageView"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView1"
        android:layout_marginLeft="42dp"
        android:layout_toRightOf="@+id/textView1" >

        <TextView
            android:id="@+id/subVitalValueTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="5.05"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/subVitalUnitTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/subVitalValueTextView"
            android:paddingLeft="5dp"
            android:text="feet" />

    </RelativeLayout>

    <TextView
        android:id="@+id/subVitalTimeAgoTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/relativeLayout1"
        android:layout_below="@+id/relativeLayout1"
        android:fontFamily="sans-serif-thin"
        android:text="5 hours ago"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Option 2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/subVitalImageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="14dp"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@+id/subVitalImageView"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/subVitalImageView"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="42dp"
        android:layout_toRightOf="@+id/textView1" >

        <TextView
            android:id="@+id/subVitalValueTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="5.05"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/subVitalUnitTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/subVitalValueTextView"
            android:paddingLeft="5dp"
            android:text="feet" />

        <TextView
            android:id="@+id/subVitalTimeAgoTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/subVitalValueTextView"
            android:fontFamily="sans-serif-thin"
            android:text="5 hours ago"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>

</RelativeLayout>

Result

enter image description here

Option 3

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/subVitalImageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="14dp"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@+id/subVitalImageView"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <TextView
            android:id="@+id/subVitalValueTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="5.05"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/subVitalUnitTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/subVitalValueTextView"
            android:paddingLeft="5dp"
            android:text="feet" />

        <TextView
            android:id="@+id/subVitalTimeAgoTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/subVitalValueTextView"
            android:fontFamily="sans-serif-thin"
            android:text="5 hours ago"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>

</RelativeLayout>

Result

enter image description here

Option 4

  <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/subVitalImageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" >

        <TextView
            android:id="@+id/subVitalUnitTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/subVitalTimeAgoTextView"
            android:layout_alignParentRight="true"
            android:paddingLeft="5dp"
            android:text="feet" />

        <TextView
            android:id="@+id/subVitalValueTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/subVitalUnitTextView"
            android:gravity="center_vertical"
            android:text="5"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/subVitalTimeAgoTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:fontFamily="sans-serif-thin"
            android:text="5 hours ago"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </RelativeLayout>

Result

enter image description here

sorry, not as expected. hours ago, value and unit are now at the center. — Drunken Daddy, May 14 '15 at 10:17
Edit, Sorry it did not fix the prroblem, they are not both aligned to the right. Try giving 5 ft and 5 hours ago as the value. now 5 ft is not align to the right — Drunken Daddy, May 14 '15 at 10:30

Android relative layout, right align a textview below another textview

1 Answers1