Stop views from overlapping in ConstraintLayout

There is no problem using chains, you just need to set your views width to match_constraint so it won't overlap your other views:

  <TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="this is some text"
    app:layout_constraintEnd_toStartOf="@+id/right"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/middle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/right"
    app:layout_constraintTop_toTopOf="@+id/right" />

<TextView
    android:id="@+id/right"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text but longgggggggggggggggggggggggggggggggggggggggggggggggggggggg"
    app:layout_constraintEnd_toStartOf="@+id/middle"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toTopOf="@+id/left" />

It will look like this:

enter image description here

You were 95% in the right way, all needed changing the width of your views.


You can use weights to divide the horizontal spacing among the textview as given below

enter image description here

<android.support.constraint.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">    

<TextView
    android:text="A long text to show how weights work in constraint layouts"
    android:id="@+id/one"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#caf"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/two"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Short text in middle"
    android:id="@+id/two"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fac"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/one"
    app:layout_constraintRight_toRightOf="@id/three"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Here is the end to the right"
    android:id="@+id/three"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fea"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/two"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="1"/>

</android.support.constraint.ConstraintLayout>

What you are missing is app:layout_constrainedWidth="true" which enforces constraints for Views with width set to wrap_content. I would chain the first two TextView with packed style and bias o 0.0 to align the chain to the left of the parent and constrain it to the third TextView on the right. The TextView on the right can stay on its own with the constraint on the right.

Example (assuming that only the left TextView will grow in size):

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="left"
            app:layout_constrainedWidth="true"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/middle"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="middle"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintRight_toLeftOf="@id/right"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="right"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>