Long TextView pushes other views

Question

I am trying to execute the following layout:

+----------------------------------------+ | [icon] [text] [icon] | +----------------------------------------+ | [icon] [very loooooooooooooooooo [icon]| | oooooooooooooooong text] | +----------------------------------------+ 

When the text is short, the icon on the right should be next to the text (not aligned right). When the text is long, I need text to wrap.

I tried using LinearLayout and RelativeLayout, but the icons are still wiped out when I have long text. Here are the layouts I tried:

LinearLayout:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="left"/> <TextView android:id="@+id/middle" android:text="a long long string, a long long string, a long long string, a long long string, a long long string, a long long string, " android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#D0E198"/> <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right"/> </LinearLayout> 

RelativeLayout:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="left"/> <TextView android:id="@+id/middle" android:text="a long long string, a long long string, a long long string, a long long string, a long long string, a long long string, " android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#D0E198" android:layout_toRightOf="@id/left"/> <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right" android:layout_toRightOf="@id/middle"/> </RelativeLayout> 

In both cases, the icon on the right is pushed out of the screen.

I also tried LinearLayout with layout_weight = "1" left and right and 0 on the middle screen. This pushes both icons off the screen.

Answer 1

Here is what I did to achieve what I want:

I added layout_weight = "1" to the middle TextView

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="left"/> <WrapWidthTextView android:id="@+id/middle" android:text="a long long string, a long long string, a long long string, a long long string, a long long string, a long long string, " android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#D0E198" android:layout_weight="1"/> <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right"/> </LinearLayout> 

However, when the middle text is short, it will still occupy the entire empty middle space and push the right TextView to the right. I need to subclass TextView:

 public class WrapWidthTextView extends TextView { // constructors here @Override protected void onMeasure (final int widthMeasureSpec, final int heightMeasureSpec) { super.onMeasure (widthMeasureSpec, heightMeasureSpec); Layout layout = getLayout (); if (layout != null) { int width = (int) Math.ceil (getMaxLineWidth (layout)) + getCompoundPaddingLeft () + getCompoundPaddingRight (); int height = getMeasuredHeight (); setMeasuredDimension (width, height); } } private float getMaxLineWidth (Layout layout) { float max_width = 0.0f; int lines = layout.getLineCount (); for (int i = 0; i < lines; i++) { if (layout.getLineWidth (i) > max_width) { max_width = layout.getLineWidth (i); } } return max_width; } } 

With a WrapWidthTextView, when the text is short, it will reduce the view to fit the text.

And that solved my problem. I hope this helps others too.

Answer 2

Set maxWidth to the text box. It will not be anymore. You can also set maxLines to stop wrapping to a new line.

Answer 3

Use the first layout, but add weight to the middle text.

Example:

  <TextView android:id="@+id/middle" android:text="a long long string, a long long string, a long long string, a long long string, a long long string, a long long string, " android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:background="#D0E198"/> 

Be sure to use 0dp as your width!

Note. . This answer is that you want the icon to be aligned right. What, I'm not sure what you need.

Answer 4

you can check:

(middle:

  android:layout_toLeftOf="@+id/right" android:layout_toRightOf="@+id/left" 

)

(right: android:layout_alignParentRight="true" )

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="left"/> <TextView android:id="@+id/middle" android:text=" a long long string, a long long string, a long long string, a long long string, a long long string, a long long string, " android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#D0E198" android:layout_centerInParent="true" android:layout_toLeftOf="@+id/right" android:layout_toRightOf="@+id/left"/> <TextView android:id="@+id/right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right" android:layout_alignParentRight="true" /> </RelativeLayout> 

Answer 5

After I pulled out my hair and there was no obvious permission, I came to this hacking. The custom textview class only works for text views, and I need it to work for a layout with a few things. The limitation of this is that you must have the maximum width defined for the correct element. It reminds me of a bit of old HTML IE 6 days.

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <FrameLayout android:id="@+id/resizing_element" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="112dp" // Right padding to the amount of space you need for the right element android:background="@drawable/bg_chat_in" // Background drawable has the same transparant padding added to complete the illusion of this hack android:text="Long text content" /> <FrameLayout android:id="@+id/meta_container" android:layout_width="112db" // This one has to have a predefined size. android:layout_height="wrap_content" android:layout_alignRight="@+id/content_container" // Align right places this element in the right padding of the first element> </FrameLayout> </RelativeLayout> 

Answer 6

You can reference this ; First you place the first left icon, then use the link method for layout [text view and icon on the right];

It works absolutely!

Of course, according to your requirement, the last icon on the right can be set as the middle text of DrawableRight. But this method has one limitation: the right icon limits the boundaries of the text.