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:
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
<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>