Make TextView as wide as possible without crowding out other views

Question

I need the following layout in my application:

As you can see, the text can be as wide as possible without pushing the screen away from other views that appear to the right, if necessary, ellipse. There will never be more than three color samples and at least 1, and all samples and x in the circle should always be visible. When the text is short, it should behave as shown in the last two lines (ferns) .

I tried to put text and images in LinearLayout , but when the text is too long, the images are not visible (or not fully visible). I suppose there is a way to indicate that images should always take up as much space as they need, while the TextView takes the rest or as much as it needs, but I cannot figure out how to do this. I don't know if RelativeLayout work better for this, or maybe TableLayout / TableRow or GridLayout , although nothing I read seems to affect this situation.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/plant_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:maxLines="1" android:singleLine="true" android:ellipsize="end" android:layout_marginRight="3dp"/> <LinearLayout android:id="@+id/color_0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginRight="2dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_remove_plant" android:visibility="invisible"/> </LinearLayout> <LinearLayout android:id="@+id/color_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:visibility="gone"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_remove_plant" android:visibility="invisible"/> </LinearLayout> <LinearLayout android:id="@+id/color_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:visibility="gone"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_remove_plant" android:visibility="invisible"/> </LinearLayout> <ImageView android:id="@+id/remove_plant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/btn_remove_plant" android:layout_marginLeft="3dp"/> </LinearLayout> 

Answer 1

Here is a working layout. Two things that happen. First, strings use LinearLayout with layout_width="wrap_content" . This allows LinearLayout to expand beyond its contents, keeping everything left-aligned (your bottom two examples). Two, TextView uses android:layout_weight="1" and android:layout_width="0dp" to tell LinearLayout that it needs to expand this TextView to fill the rest of the available, but not pop out the other views (your triples are Examples). Note: this is not all layout_weight , only what it does in this context.

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:lines="1" android:text="This is a long line of text and is testing something. This is a long line of text and is testing something. This is a long line of text and is testing something." /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#F00" /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#0F0" /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#00F" /> <Button android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:lines="1" android:text="This is a long line of text and is testing something. This is a long line of text and is testing something. This is a long line of text and is testing something." /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#F00" /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#0F0" /> <Button android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:lines="1" android:text="This is some line of text." /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#F00" /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#00F" /> <Button android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:ellipsize="end" android:lines="1" android:text="This is short" /> <View android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:background="#F00" /> <Button android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" /> </LinearLayout> </LinearLayout> 

Answer 2

This code gives you the screen size in dp format and pixels. Set your images with a fixed size, for example, 30dp or Math.min (screenWidth, screenHeight) / 100 to set it relative to the size of the display. After that, since you know how many images will be shown, adjust (number of images) * imageSize from the total screen width and set this as the width of the text box

 WindowManager wm2 = (WindowManager) con.getSystemService(Context.WINDOW_SERVICE); Display display = wm2.getDefaultDisplay(); DisplayMetrics outMetrics = new DisplayMetrics (); display.getMetrics(outMetrics); float density = getResources().getDisplayMetrics().density; dpHeight = (int) (outMetrics.heightPixels / density); dpWidth = (int) (outMetrics.widthPixels / density); screenWidth=outMetrics.widthPixels; screenHeight=outMetrics.heightPixels; 

so you programmatically set the width of the text box

 LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)textView.getLayoutParams(); params.width=/calculated size/; textView.setLayoutParams(params); 

Answer 3

When the text is short, it should behave as shown in the last two lines (ferns).

I don’t think a standard layout will give you what you want. I assume that you will need to create a custom ViewGroup that will fulfill your requirements. The implementation of Qberticus is probably as close as you can use off-the-shelf layouts.

However, I can’t exclude that GridLayout can somehow disable this.

Personally, I would go with a TableLayout , with four columns for your color swatches and X icons and a fifth column for text. You can dynamically build table rows to have text fill columns that will not be used by patterns, and you would use android:strechColums="0" to provide all the extra space in the leftmost column where the text is. As with the Qberticus approach, this leaves you with the right snapshots and icons, which IMHO is the best user interface.

If you have problems with patterns and badges with the rule of law, you have spaces between text and patterns / icons, make the text correct gravity (or end , if you support RTL languages).