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.

score 1 · Answer 1 · answered Aug 27 '17 at 11:55

1

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

answered Aug 27 '17 at 11:55

Aradhna

973
10
20

I need exactly a wrap_content. If remove app:layout_constraintBottom_toBottomOf="parent", layout_marginBottom stops working. – Alexander Ermakov Aug 27 '17 at 12:13

Firoz Memon · Answer 2 · 2017-08-31T19:01:14.460

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!

It doesn't solve the problem completely, as the bottom margin disappears. — Alexander Ermakov, Aug 27 '17 at 11:59
If it is the last widget that you need in your xml, then your `layout_marginBottom` will have no effect — Firoz Memon, Aug 27 '17 at 12:02
No, it's just an example, in fact layout like this has background and is used in RecyclerView. — Alexander Ermakov, Aug 27 '17 at 12:10
I suggest you remove it from `TextView` and put `layout_marginBottom` inside `ConstraintLayout`, that should fix your issue — Firoz Memon, Aug 27 '17 at 12:15
If you are using `RecyclerView` then you can use `DividerItemDecoration` for spacing between items. View https://stackoverflow.com/questions/24618829/how-to-add-dividers-and-spaces-between-items-in-recyclerview for more details — Firoz Memon, Aug 30 '17 at 12:37
I know about an existance of DividerItemDecoration, but can not undertsand how it can help in this situation. I don't need a space between the elements, margin from a bottom should be inside the element. — Alexander Ermakov, Aug 30 '17 at 18:36

score 0 · Answer 3 · answered Aug 27 '17 at 11:55

0

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

answered Aug 27 '17 at 11:55

Mohamed Nagy Mostafa

343
3
15

score 0 · Answer 4 · answered Aug 27 '17 at 12:51

0

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.

answered Aug 27 '17 at 12:51

James Steward

68
1
9

score 0 · Answer 5 · answered Oct 26 '17 at 18:29

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.

Overlay of the elements in ConstraintLayout

5 Answers5