Overlay of the elements in ConstraintLayout

Question

I have a following layout:

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

    <ImageView
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        />

    <TextView
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        android:id="@+id/title"
        android:textSize="15sp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        />

    <TextView
        android:text="  text text"
        android:id="@+id/prev"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="WHY WHY WHY"
        app:layout_constraintTop_toBottomOf="@+id/prev"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        />


</android.support.constraint.ConstraintLayout>

We have a following result: image with this issue

Besides, if we change the text of the first TextView to: "1234567891113151719212325272931333537394143454749515355575961636567697173757779818385878991" (that is, add 2 more numbers), last TextView stops closing the previous one.

Also, if we change the layout_marginBottom attribute to 0dp in the last TextView (and text is to leave as it was in the Example), problem also disappears. What is the reason of this problem? How to fix it?

UPDATE:

On the left side added a path which has a match_parent height. Because of this can not use paddingBottom in ConstraintLayout. The layout is used in RecyclerView, that is why the bottom element needs a layout_marginBottom.

Answer 1

the error happened because that line app:layout_constraintBottom_toBottomOf="parent" in the last textview .. because ConstraintLayout like a RelativeLayout
jsut remove this line

Answer 2

Either you remove the app:layout_constraintBottom_toBottomOf="parent" from textview3 or you change the height of the layout to match_parent.

Hope this helps! :)

Answer 3

Remove app:layout_constraintBottom_toBottomOf="parent" from textview3 like the others have suggested, and add android:paddingBottom="8dp" to the parent constraintLayout. You could also add a marginTop parameter to textview3 to space it from textview2.

Answer 4

I think by removing app:layout_constraintBottom_toBottomOf="parent" will solve your issue

This issue occurs because you have given parent ConstraintLayout android:layout_height="wrap_content" hence it automatically tries to arrange itself within specified boundaries

EDIT:

I have tried & tested below code which works in my RecyclerView, hope it works for you too.

<?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="wrap_content"
    android:background="#EEEEEE">

<!--Your Test ImageView-->
    <!--<ImageView
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />-->

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        android:textSize="15sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/prev"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:text="  text text"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:paddingBottom="32dp"
        android:text="WHY WHY WHY"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/prev" />


</android.support.constraint.ConstraintLayout>

Hope it helps!

Answer 5

I had a very similar issue to this one Problems with ConstraintLayout - vertical margin doesn't work and the only solution is to use "packed" vertical chain. All those "...add/remove layout_constraintBottom_toBottomOf="parent"..." are just tricks which solve problem for just particular cases.

Here's your layout with integrated "packed" vertical chain:

<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="wrap_content"
    android:background="#EEEEEE" >

    <ImageView
        android:layout_width="4dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:textSize="15sp"
        android:text="12345678911131517192123252729313335373941434547495153555759616365676971737577798183858789"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/prev"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:text="  text text"
        android:id="@+id/prev"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="WHY WHY WHY"
        app:layout_constraintTop_toBottomOf="@+id/prev"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

It works properly for any text view length and ConstraintLayout wraps its content properly, look at this gif:

You can find more complex implementations of RecyclerView item layouts built with ConstraintLayout here https://github.com/eugenebrusov/cards.