CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Sebastien
Sebastien

Reputation: 4295

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

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:

design preview

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?

Upvotes: 0

Views: 737

Answers (4)

P.Juni
P.Juni

Reputation: 2475

Try to change to layout_constraintEnd_toEndOf instead layout_constraintRight_toRightOf :)

Upvotes: 1

Mergim Rama
Mergim Rama

Reputation: 388

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>

Upvotes: 0

Karunesh Palekar
Karunesh Palekar

Reputation: 2345

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.

Upvotes: 0

Prajwal Waingankar
Prajwal Waingankar

Reputation: 2710

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

Upvotes: 0

Related Questions