TextView exceed Constraint if text is too long in ConstraintLayout

Jacky Tsang :

I have one TextView aligned to the left and centered vertically. Two groups of ImageView and TextView are both aligned to the right, with two layout configurations, one with image on the right, another with image on the left.

The hello world text can be very long. I want it to expand to fill the whole width without covering up the left text.

I have added app:layout_constraintStart_toEndOf="@id/text1" to constraint the right group (image + text) not to overlap with the left text. However, it does not behave as I expected.

How to make it not overlapping using only ConstraintLayout?

Text1 will be covered up if the right text is too long, which is not expected. Be noted that the image on the second row is gone too.

code:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text1" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/row1_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/row1_image"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Hello World" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/row1_image"
        android:layout_width="22dp"
        android:layout_height="22dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/row1_text"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/ic_confirm" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/horizontal_barrier"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="row1_text,row1_image" />


    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/row2_image"
        android:layout_width="22dp"
        android:layout_height="22dp"
        app:layout_constraintEnd_toStartOf="@id/row2_text"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintTop_toTopOf="@id/horizontal_barrier"
        tools:src="@drawable/ic_confirm" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/row2_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/row2_image"
        app:layout_constraintTop_toTopOf="@id/horizontal_barrier"
        tools:text="Hello World" />

</androidx.constraintlayout.widget.ConstraintLayout>

expected to be like below if the right text is too long. It can achieved by LinearLayout and RelativeLayout