CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Alexander Ermakov
Alexander Ermakov

Reputation: 11

Overlay of the elements in ConstraintLayout

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.

Upvotes: 1

Views: 3774

Answers (5)

Eugene Brusov
Eugene Brusov

Reputation: 17846

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:

Result view

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

Upvotes: 0

Firoz Memon
Firoz Memon

Reputation: 4650

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!

Upvotes: 0

James Steward
James Steward

Reputation: 68

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.

Upvotes: 0

Aradhna
Aradhna

Reputation: 983

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

Upvotes: 1

Mohamed Nagy Mostafa
Mohamed Nagy Mostafa

Reputation: 353

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

Upvotes: 0

Related Questions