Android - ConstraintLayout - ellipsize end for large text

Question

I need some help regarding an Android layout. I have the following code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.725" />

<TextView
    android:id="@+id/data_field_1_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="10dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_1_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_1_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_1_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />

<TextView
    android:id="@+id/data_field_2_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="8dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toBottomOf="@id/data_field_1_name"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_2_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_2_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />


<TextView
    android:id="@+id/data_field_3_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="8dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toBottomOf="@id/data_field_2_name"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_3_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_3_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_3_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />

<TextView
    android:id="@+id/value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:text="17.40" />

<ImageView
    android:id="@+id/flag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginTop="2dp"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintEnd_toEndOf="@+id/unit"
    app:layout_constraintStart_toStartOf="@+id/unit"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/unit"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="2dp"
    android:gravity="center_horizontal"
    app:layout_constraintBaseline_toBaselineOf="@id/value"
    app:layout_constraintStart_toEndOf="@+id/value"
    tools:text="KG" />

<TextView
    android:id="@+id/label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="15dip"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_3_name"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/guideline"
    tools:text="TOTAL" />
</android.support.constraint.ConstraintLayout>

The output is:

My problem is: If the main value(17.40) is too large, that value should be "ellipsized" to end, but it goes over the "Active" text.

The input for large text is:

I need something like that for large value:

PS: the unit and and the flag should be always displayed at the end of the main value.

Could you please help me with suggestions? I tried a lot of ideas, but didn't find a solution.

alexwan02 · Answer 1 · 2019-01-29T06:01:54.403

40

Set Children Layout Width to 0dp

android:layout_width="0dp"

Set Right_toRightOf andLeft_toRightOf

app:layout_constraintLeft_toRightOf="@+id/listingImageView" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"

edited Jan 29 '19 at 06:01

answered Jan 08 '18 at 11:29

alexwan02

723
6
10

3

setting width to 0dp totally solved my problem for similar problem, thanks – Amr Saber Jun 09 '18 at 21:36
1

1. Which layout need set android:layout_width="0dp" 2. Which view need set app:layout_constraintLeft_toRightOf="@+id/listingImageView" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" ? – Harco Oct 30 '18 at 10:27
1

Care to give some explanation how setting the width to 0 works rather than wrap_content? – Jim Aug 28 '19 at 11:15
This solved my similar problem as well, thank you! and upvoted! – toantran Sep 25 '22 at 15:26

score 4 · Answer 2 · answered Dec 13 '18 at 11:18

First, you need to add android:ellipsize="end" and android:maxLines="1" to your TextView android:id="@+id/value". Then you need to add value and unit into a horizontal chain. Connect start of the chain to the parent start and end of the chain to start/end of the Guideline android:id="@+id/guideline".

After that value and unit will have the same width and fill whole space between the parent start and the Guideline android:id="@+id/guideline". To make the width different you can set android:layout_width="wrap_content" to unit or you can play with app:layout_constraintHorizontal_weight for both

The code can be like that:

<TextView
    android:id="@+id/value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@+id/unit"
    tools:text="17.40000000" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/unit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="2dp"
    android:gravity="center_horizontal"
    android:maxLines="1"
    android:layout_marginEnd="8dp"
    app:layout_constraintBaseline_toBaselineOf="@id/value"
    app:layout_constraintStart_toEndOf="@+id/value"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    tools:text="KG" />

It will look like this:

score 2 · Answer 3 · answered Aug 31 '17 at 14:15

For that

1) you will have to specify fixed length for that, textview width 0dp won't work.

2) you need ellipsize attribute set to "end" to the textview.

3) along with maxlines attribute set to 1.

Tested this and works fine.

You can keep fix width as you like..

<TextView
    android:id="@+id/value"
    android:layout_width="140dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:ellipsize="end"
    android:maxLines="1"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:text="17.40000000000000" />

2 & 3 right, I forgot to add them in example, they are already in styles. But for 1, I cannot use fixed value. I need to have it wrap_content — Cosmin Mihu, Aug 31 '17 at 14:35
so property of wrap_content is it will expand as much as you want which is 1 line with my code, so it will go till the end of the screen width and then u will get dots at the end. But to work with what you want you have to use fixed size else it wont work — Aalap Patel, Aug 31 '17 at 14:40

score 1 · Answer 4 · answered Aug 31 '17 at 16:03

Assuming you have your value TextView set up to ellipsize itself, you can solve this by programmatically setting the TextView's maximum width after the ConstraintLayout finishes laying out all the views.

I created a tiny app that just inflates the layout you posted in your question (though I had to change the flag to an image I had). I added these attrs to the value view:

    android:maxLines="1"
    android:ellipsize="end"

And this is my Java code:

public class MainActivity extends AppCompatActivity {

    private TextView value;
    private TextView data2;
    private TextView unit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        value = (TextView) findViewById(R.id.value);
        data2 = (TextView) findViewById(R.id.data_field_2_name);
        unit = (TextView) findViewById(R.id.unit);

        value.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    value.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                else {
                    value.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }

                setMaxWidth();
            }
        });
    }

    private void setMaxWidth() {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) value.getLayoutParams();

        int maxWidth = data2.getLeft() - value.getLeft();
        int maxWidthConsideringUnits = maxWidth - unit.getWidth();
        int maxWidthIncludingMargin = maxWidthConsideringUnits - params.getMarginEnd();

        value.setMaxWidth(maxWidthIncludingMargin);
    }
}

Here are some screenshots:

score 1 · Answer 5 · answered Nov 18 '22 at 07:15

Here we go.

<TextView
        android:id="@+id/value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="25sp"
        android:ellipsize="end"
        android:singleLine="true"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/unit"
        tools:text="17.40000" />

    <TextView
        android:id="@+id/unit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        app:layout_constraintBaseline_toBaselineOf="@id/value"
        app:layout_constraintStart_toEndOf="@+id/value"
        app:layout_constraintEnd_toEndOf="@id/guideline"
        tools:text="KG" />

Note that, ensure the LayoutParam.width of the parent ConstraintLayout is not wrap_content.

Android - ConstraintLayout - ellipsize end for large text

5 Answers5

Linked