Two TextViews side by side, only one for ellipse?

Question

I want two TextView items to appear side by side (in a list item), one is left aligned, one right. Something like:

 |<TextView> <TextView>| 

( | represent the extremes of the screen)

However, the TextView on the left may contain content that is too long to fit on the screen. In this case, I want it to be an ellipsis, but still display the entire right TextView . Something like:

 |This is a lot of conte...<TextView>| 

I have had many attempts using both LinearLayout and RelativeLayout , and the only solution I came up with is using RelativeLayout and adding marginRight left of the TextView big is enough to clear the TextView right. As you can imagine, this is not optimal.

Are there any other solutions?

The LinearLayout , LinearLayout solution:

 <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" > <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:ellipsize="end" android:inputType="text" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="0" android:layout_gravity="right" android:inputType="text" /> </LinearLayout> 

Old, TableLayout solution:

 <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="1" android:shrinkColumns="0" > <TableRow> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:singleLine="true" /> <TextView android:id="@+id/date" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:singleLine="true" android:ellipsize="none" android:gravity="right" /> </TableRow> </TableLayout> 

Answer 1

Use TableLayout and put both TextViews in the row of the table, try. I have not tried

Answer 2

Just an idea, why don’t you first declare the text image on the right in the xml layout and set its width as the cover content, android:layout_alignParentRight="true" and android:gravity="right" . Then declare the text field on the left, set its width as the filling parent element, android:layout__toLeftOf = {text field identifier on the right} with RelativeView as the root view.

By announcing the correct text view first, its required width will first be computed and take the form, and the text image on the left will take up the remaining view space.

I still have not tried this, although this may give you some idea.

[Update]

I tried to create an xml resource layout ... and it somehow works ...

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/right" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right" android:text="right" > </TextView> <TextView android:id="@+id/left" android:layout_alignParentLeft="true" android:layout_toLeftOf="@id/right" android:layout_width="fill_parent" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:singleLine="true" android:maxLines="1" android:text="too looooooooooong ofskgjo sdogj sdkogjdfgds dskjgdsko jgleft" > </TextView> </RelativeLayout> 

Answer 3

Answer LinearLayout worked for me with the same problem. Added as a separate answer, because it was not clear what they did and did not work for the seeker.

One difference. TableLayout was less than ideal for me, because I had two rows of data, and I wanted the bottom row to behave as described by this question, and the top row to cover the area. This question was answered in another SO: Colspan question in TableLayout , but LinearLayout was simpler.

Although getting the width on the right is me a bit. I turned on the Android lint setting using 0dp width for the zoom element for performance.

 <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" > <TextView android:layout_height="wrap_content" android:layout_width="0dp" android:layout_weight="1" android:ellipsize="end" android:inputType="text" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="0" android:layout_gravity="right" android:inputType="text" /> </LinearLayout> 

Answer 4

There are many answers to this and almost equivalent, repetitive questions about SO. Proposed approaches usually work, however. Put it in LinearLayout , wrap everything in an optional RelativeLayout , use TableLayout ; they all seem to solve it for a simpler layout, but if you need these two TextView inside something more complex or the same layout will be reused, for example using RecyclerView , everything will break very quickly.

The only solution I found that really works all the time, no matter how big the layout you put it in, is a custom layout. It is very simple to implement, and, being as thin as possible, it will support the layout quite flat, it is easy to maintain, so in the end I think this is the best solution to the problem.

 public class TwoTextLayout extends ViewGroup { public TwoTextLayout(Context context) { super(context); } public TwoTextLayout(Context context, AttributeSet attrs) { super(context, attrs); } public TwoTextLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int count = getChildCount(); if (count != 2) throw new IllegalStateException("TwoTextLayout needs exactly two children"); int childLeft = this.getPaddingLeft(); int childTop = this.getPaddingTop(); int childRight = this.getMeasuredWidth() - this.getPaddingRight(); int childBottom = this.getMeasuredHeight() - this.getPaddingBottom(); int childWidth = childRight - childLeft; int childHeight = childBottom - childTop; View text1View = getChildAt(0); text1View.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST)); int text1Width = text1View.getMeasuredWidth(); int text1Height = text1View.getMeasuredHeight(); View text2View = getChildAt(1); text2View.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST)); int text2Width = text2View.getMeasuredWidth(); int text2Height = text2View.getMeasuredHeight(); if (text1Width + text2Width > childRight) text1Width = childRight - text2Width; text1View.layout(childLeft, childTop, childLeft + text1Width, childTop + text1Height); text2View.layout(childLeft + text1Width, childTop, childLeft + text1Width + text2Width, childTop + text2Height); } } 

The implementation could not be simpler, it simply measures two texts (or any other child views in fact), and if their total width exceeds the width of the layout, reduces the width of the first view.

And if you need changes, for example. to align the second text to the baseline of the first, you can also easily solve this problem:

 text2View.layout(childLeft + text1Width, childTop + text1Height - text2Height, childLeft + text1Width + text2Width, childTop + text1Height); 

Or any other solution, for example, reducing the second representation in relation to the first, aligning to the right, etc.

Answer 5

Why don't you put the left margin in the right TextView? I use this approach for

 |<TextView> <ImageButton>| 

and it works.