Aligning right and left with linear or relativelayout with truncated text?
I am trying to do a listview which looks like this:
(source: pici.se)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"
and开发者_JS百科roid: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.
I have the same issue as you a few days ago. Some points:
I've used
android:singleLine="true"
instead ofandroid: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 itandroid: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.
精彩评论