Search code examples
androidandroid-relativelayoutright-align

Android relative layout, right align a textview below another textview

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

  • 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