Wrapping text on a TextView that's constrained both on the left and on the right in a ConstraintLayout

Question

In a ConstraintLayout, I have 2 TextView's side-by-side, and I want the right one to wrap text when it becomes too long so that it stays on the right of the left TextView, and doesn't overflow the container. Here is the code I have now:

<androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="10sp">

      ...

      <TextView
           android:id="@+id/buildingTypeLabel"
           style="@style/FormLabel"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:paddingTop="5sp"
           android:paddingBottom="5sp"
           android:text="@string/reference_view_building_type"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintTop_toBottomOf="@id/dateLabel"
           tools:text="Type de bâtiment" />

      <TextView
           android:id="@+id/buildingType"
           style="@style/FormValue"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_gravity="end"
           android:layout_marginStart="5dp"
           android:layout_weight="1"
           android:ellipsize="none"
           android:maxLines="100"
           android:scrollHorizontally="false"
           app:layout_constraintBaseline_toBaselineOf="@id/buildingTypeLabel"
           app:layout_constraintRight_toRightOf="parent"
           app:layout_constraintStart_toEndOf="@+id/buildingTypeLabel"
           app:layout_constraintTop_toBottomOf="@id/date"
           tools:text="Bâtiments gouvernementaux" />
                ...
</androidx.constraintlayout.widget.ConstraintLayout>

But instead of putting text text on 2 lines in the right TextView, it overflows on the right:

Note that I have tried to add app:layout_constrainedWidth="true" to the right TextView, but it doesn't change anything.

How can I strictly enforce the right and left contraints of that TextView and have it wrap text to have a smaller width when needed?

try to change to `layout_constraintEnd_toEndOf` instead `layout_constraintRight_toRightOf` — P.Juni, Oct 12 '20 at 10:58
@P.Juni your anwser was by far the easiest. I had mixed start/end and left/right constraints. You should add it as an answer so that I can select it as the right answer — Sebastien, Oct 12 '20 at 13:31

score 1 · Accepted Answer · answered Oct 12 '20 at 13:32

1

Try to change to layout_constraintEnd_toEndOf instead layout_constraintRight_toRightOf :)

answered Oct 12 '20 at 13:32

P.Juni

2,365
14
26

score 0 · Answer 2 · answered Oct 12 '20 at 10:59

0

Use ellipsize= "end" for the textview on the right that is extending text outside of the device screen.

answered Oct 12 '20 at 10:59

Prajwal Waingankar

2,534
2
13
20

score 0 · Answer 3 · edited Oct 12 '20 at 11:19

Use Guidelines Guidelines are part of the constraint layout api. Documentation are here -> https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline

This is how you can define your guideline in xml.

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_start"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="?dialogPreferredPadding" />

Guidlines can act as a differentiating factor between the two text views that you want to segregate .

Refer to this stackoverflow answer for much better understanding What is difference between Barrier and Guideline in Constraint Layout?

The above link will also introduce you to barriers which is also part of constraint layout api which can also help you solve the above issue.

score 0 · Answer 4 · answered Oct 12 '20 at 12:02

Below you can find the solution:

<androidx.constraintlayout.widget.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:padding="10sp">

    <TextView
        android:id="@+id/buildingTypeLabel"
        style="@style/FormLabel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingTop="5sp"
        android:paddingBottom="5sp"
        android:text="@string/reference_view_building_type"
        app:layout_constraintEnd_toStartOf="@id/buildingType"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dateLabel"
        tools:text="Type de bâtiment" />

    <TextView
        android:id="@+id/buildingType"
        style="@style/FormValue"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:maxLines="100"
        app:layout_constraintBaseline_toBaselineOf="@id/buildingTypeLabel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/buildingTypeLabel"
        app:layout_constraintTop_toBottomOf="@id/date"
        tools:text="Bâtiments gouvernementaux\n\nlef,le,flelf,le,fle," />

</androidx.constraintlayout.widget.ConstraintLayout>

Wrapping text on a TextView that's constrained both on the left and on the right in a ConstraintLayout

4 Answers4