Stop views from overlapping in ConstraintLayout

Question

I am trying to build a simple layout with three views using ConstrainLayout:

When the text in the left view is very long, I want to see this:

But what I get instead is this - the left view growth too much to the right and hides middle view.

Here is my code:

<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"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    
    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintTop_toTopOf="parent"/>
    
    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Some of the things I tried so far:

making a chain and trying out different chain styles
setting android:minWidth to Middle view to prevent it from being squashed by left view
using Guidline to prevent the left and/or middle view to expand too far right

I spent around 4 hours trying to make things work, but so far without success. Would really appreciate help.

score 46 · Accepted Answer · answered Jul 03 '19 at 17:54

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>

Great, this is the only answer that worked. In all other answers the views are not wrapping themselves around the text, but are instead stretching to fill together the whole width of parent view. — displayname, Jul 04 '19 at 09:47

score 2 · Answer 2 · answered Jul 03 '19 at 17:27

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.

score 1 · Answer 3 · answered Jul 03 '19 at 16:51

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>

Stop views from overlapping in ConstraintLayout

3 Answers3

Linked