Aligning right and left with linear or relativelayout with truncated text?

Question

I am trying to do a listview which looks like this:

It has two parts, the left is left-aligned and contains two textviews which are single line and truncated. The right is part also has two textviews but they are right-aligned and have constant size. The main problem is that the right part does not align to the right. If I use a static width to push it to the right side it works pretty good, but then it does not look good in landscape mode.

I thought it should be simple to accomplish. But it wasn't.

First I tried with Linearlayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/L1"
        android:layout_height="fill_parent"
        android:layout_weight="0.8"
        android:layout_width="0dip">
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:ellipsize="end"
            android:scrollHorizontally="true"
            android:text="Long text Long text Long text Long text Long text Long text Long text" />
        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:ellipsize="end"
            android:scrollHorizontally="true"
            android:text="Short text" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/L2"
        android:layout_gravity="top|right"
        android:layout_height="fill_parent"
        android:layout_weight="0.2"
        android:layout_width="0dip">
        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="12:12" />
        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="64%"
            android:layout_gravity="right" />
    </LinearLayout>
</LinearLayout>

I have been fiddling with the weight property, but it doesn't seem to help. Right part does not align to the right at all.

And then I tried with Relativelayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">
    <TextView
        android:id="@+id/text1"
        android:layout_height="wrap_content"
        android:lines="1"
        android:scrollHorizontally="true"
        android:layout_alignParentTop="true"
        android:text="Long text Long text Long text Long text Long text Long text Long text"
        android:layout_alignParentLeft="true"
        android:ellipsize="end"
        android:layout_width="275dp" />
    <TextView
        android:id="@+id/text2"
        android:layout_height="wrap_content"
        android:lines="1"
        android:ellipsize="end"
        android:scrollHorizontally="true"
        android:text="Long text Long text Long text Long text Long text Long text Long text"
        android:layout_below="@+id/text1"
        android:layout_alignParentLeft="true"
        android:layout_width="275dp" />
    <TextView
        android:id="@+id/text3"
        android:layout_height="wrap_content"
        android:text="12:12"
        android:layout_gravity="right"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@+id/text1"
        android:layout_width="40dp"
        android:layout_alignRight="@+id/text4" />
    <TextView
        android:id="@+id/text4"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="64%"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@+id/text2"
        android:layout_width="40dp" />
</RelativeLayout>

Same problem here, the right part is not aligning to the the right properly, and I have to use a static size of android:layout_width to push it to the other side. And if don't use a static size the text start clipping each other.

Answer 1

I have the same issue as you a few days ago. Some points:

• I've used android:singleLine="true" instead of android:lines="1". Honestly I don't know the difference. I guess once is deprecated.

• To align right: android:gravity="right"

• To avoid the overlap I placed your TextViews on the left inside a LinearLayout and I add it android:layout_marginRight="50dp"

My xml:

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

    <LinearLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:layout_marginRight="50dp">

        <TextView
            android:id="@+id/text1"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:scrollHorizontally="true"
            android:layout_alignParentTop="true"
            android:text="Long text Long text Long text Long text Long text Long text Long text"
            android:layout_alignParentLeft="true"
            android:ellipsize="end"
            android:layout_width="275dp" />
        <TextView
            android:id="@+id/text2"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:ellipsize="end"
            android:scrollHorizontally="true"
            android:text="Long text Long text Long text Long text Long text Long text Long text"
            android:layout_below="@+id/text1"
            android:layout_alignParentLeft="true"
            android:layout_width="275dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/text3"
        android:layout_height="wrap_content"
        android:text="12:12"
        android:layout_gravity="right"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@+id/text1"
        android:layout_width="40dp"
        android:layout_alignRight="@+id/text4" />
    <TextView
        android:id="@+id/text4"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="64%"
        android:layout_alignParentRight="true"
        android:gravity="right"
        android:layout_below="@id/text3"
        android:layout_width="40dp" />
</RelativeLayout>

Using android:layout_marginRight="50dp" to avoid overlapping doesn't feel like the right choice, but at the moment is the only solution I've found.