android relativelayout two rows with column on the right

Question

I'm trying to achieve a two rows on the left with a floating (right) TextView which will have a number. This is a listview item layout.

                               ____
___________________________   |    |
___________________________   |____|

So contents would be something like

LINE ONE CAN SOMETIMES BE LONG   £2000.00
line two

However the £2000.00 (which is larger text size) is either overlapped with code sample below or by using android:layout_toRightOf="@+id/row1" it's basically sitting next to row1 and sometimes goes on next line if row1 is long. It should always be in one line.

Can anyone help?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="6dp" >

    <TextView
        android:id="@+id/row1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/rightcol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:textColor="#cc0000"
        android:textSize="22dp" />

    <TextView
        android:id="@+id/row2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/row1" />

</RelativeLayout>

With this the right column text overlaps row1

Thanks for checking

score 4 · Accepted Answer · edited May 23 '17 at 11:45

android:layout_weight will be useful for achieving your desired layout (see this). Instead of 50dp you could use android:layout_width="wrap_content" for the right side text view. The other TextViews will adjust to fill the remaining space. You can use android:singleLine="true" to limit your TextViews so that they don't wrap.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"/>

</LinearLayout>

If you're set on using RelativeLayout this should work.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:padding="6dp" >

    <TextView
        android:id="@+id/row1"
        android:text="This text can be very, very long"
        android:singleLine="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/rightcol"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/rightcol"
        android:text="$2000000000000.00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:textColor="#cc0000"
        android:textSize="22dp" />

    <TextView
        android:id="@+id/row2"
        android:text="Second line of text"
        android:singleLine="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/rightcol"
        android:layout_below="@+id/row1" />

</RelativeLayout>

Added `android:singleLine="true"` but it doesn't really help since amount floats above row1. I know this can be achieved with two LinearLayouts but I am a little fixated on getting relativelayout to do the job with minimal xml. If not then I can always revert to LL. Thanks again — Onimusha, Dec 15 '14 at 03:36
Add `android:layout_toLeftOf="@+id/rightcol"` to the two left text views. — mpkuth, Dec 15 '14 at 03:43
`android:layout_toLeftOf` did the job. I had to make the two rows `fill_parent` and `gravity` left otherwise it was right aligned. Thanks dude. I'll upvote but the current answer doesn't answer question so please update so I can mark it as correct answer — Onimusha, Dec 15 '14 at 03:52

android relativelayout two rows with column on the right

1 Answers1