Textview with constrainedHeight inside a ConstraintLayout with height wrap_content expands the ConstraintLayout and prevents ellipsize

[DavidazAcc]

· Issue
I was trying to do a special view where a text can expand up it's constraints size and then ellipsize. This text has a button below itself, so the button should also be in the layout and prevent being hidden. The main layout should have wrap_content as there are more parts of the layout, and this button and text are constrained inside the bounds of another view.

The main problem is that the constraint layout is getting a little crazy if it has wrap_content as height, as the text is expanding the view when it shouldn't. If I had a fixed height in the parent (thing that I don't want), then the ellipsize of the TextView is not working. I attach two example xmls and their captures.

· Examples
Wrap Content issue:

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

    <View
        android:id="@+id/view_containing_text_and_button"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@android:color/darker_gray"/>

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis elit ac pulvinar sollicitudin. Integer at augue velit. Duis arcu erat, mattis vel euismod a, mollis eget est. Aenean congue sapien sit amet hendrerit vehicula. In vulputate neque non placerat dignissim. Proin sit amet mollis quam. "
        android:ellipsize="end"
        android:textStyle="bold"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintEnd_toEndOf="@id/view_containing_text_and_button"
        app:layout_constraintStart_toStartOf="@id/view_containing_text_and_button"
        app:layout_constraintTop_toTopOf="@id/view_containing_text_and_button"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view_containing_text_and_button"
        app:layout_constraintEnd_toEndOf="@id/view_containing_text_and_button"
        android:text="I'm a button!"
        app:layout_constraintStart_toStartOf="@id/view_containing_text_and_button"
        app:layout_constraintTop_toBottomOf="@id/text_view" />
    
    <!-- Here there are more things that can be added or not to the ConstraintLayout, thus the not fixed height in the ConstraintLayout -->

</androidx.constraintlayout.widget.ConstraintLayout>

You can see in this example that the textview and button expands further from the view where they should be constrained (the grey view)

Not ellipsize issue // match parent or fixed size inside the ConstraintLayout

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

    <View
        android:id="@+id/view_containing_text_and_button"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@android:color/darker_gray"/>

    <TextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis elit ac pulvinar sollicitudin. Integer at augue velit. Duis arcu erat, mattis vel euismod a, mollis eget est. Aenean congue sapien sit amet hendrerit vehicula. In vulputate neque non placerat dignissim. Proin sit amet mollis quam. "
        android:ellipsize="end"
        android:textStyle="bold"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintEnd_toEndOf="@id/view_containing_text_and_button"
        app:layout_constraintStart_toStartOf="@id/view_containing_text_and_button"
        app:layout_constraintTop_toTopOf="@id/view_containing_text_and_button"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view_containing_text_and_button"
        app:layout_constraintEnd_toEndOf="@id/view_containing_text_and_button"
        android:text="I'm a button!"
        app:layout_constraintStart_toStartOf="@id/view_containing_text_and_button"
        app:layout_constraintTop_toBottomOf="@id/text_view" />

    <!-- Here there are more things that can be added or not to the ConstraintLayout, thus the not fixed height in the ConstraintLayout -->

</androidx.constraintlayout.widget.ConstraintLayout>

Here we can see that when this works as intended design wise, but the ellipsize does not work and we can even see the text rendering behind the textview bounds.

I attach a picture of the render of the xml with a small text inside the view to show why this approach is needed:

There you can see that we want both text and button together and centered inside the view and prevent it from expanding further with an ellipsize in that case.

· Version
I'm using ConstraintLayout version 'androidx.constraintlayout:constraintlayout:2.1.4'