Problems with ConstraintLayout - vertical margin doesn't work

Question

I want to build this simple layout using ConstraintLayout:

It works as expected when Title and Subtle are just single line text. The problem comes with longer text. As you can see, Title and Subtle overlap each other:

Here's the source code I use for layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#EEEEEE">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="24dp"
            android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            app:layout_constraintTop_toBottomOf="@+id/textView1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

</FrameLayout>

So where's the problem?

EDIT 1 10/5/2017 1:19 PM

Seems like can be reproduced only on devices/simulators running Android 6.0 (API 23). Works as expected on devices running API 21-22, 24+.

score 4 · Accepted Answer · answered Oct 05 '17 at 11:51

I recommend you using only the ConstraintLayout which gives you chaining option. With it, you can pack two TextViews and center them vertically in ConstraintLayout itself without the FrameLayout and the problem you are facing:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="24dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

</android.support.constraint.ConstraintLayout>

Yep, "packed" chain style solved that problem. Thanks! – Eugene Brusov Oct 05 '17 at 14:50 — Eugene Brusov, Oct 05 '17 at 14:50

score 3 · Answer 2 · answered Oct 05 '17 at 12:09

3

On API 23 with ConstraintLayout version 1.0.0-beta5, it looks like the top margin is not respected or the height of the top TextView is not calculated correctly. I do see an overlap on API 23 but not on API 24 with this version of ConstraintLayout.

However, with ConstraintLayout version 1.1.0-beta2, everything looks OK on API 23 and API 24, so this might have been a problem that was corrected. I suggest that you upgrade to a later release of ConstraintLayout to see if the problem persists.

answered Oct 05 '17 at 12:09

Cheticamp

61,413
10
78
131

I've tested it with 1.1.0-beta2 and yes, looks like it's fixed in that release. But since it's still in beta, I prefer to not use it so far. Looks like for production is better to use chain="packed" so far. – Eugene Brusov Oct 05 '17 at 14:49

score 0 · Answer 3 · answered Oct 05 '17 at 11:20

0

Your TextView1 doesn't have lower boundaries.

Simply add

app:layout_constraintBottom_toTopOf="@+id/textView2"

for your first textView

answered Oct 05 '17 at 11:20

NSimon

5,212
2
22
36

Your solution works, but it works for this particular case only, if I add ImageView above those text views, I get other weird issues with layout. Look at this question for example https://stackoverflow.com/questions/46588508/problems-with-constraintlayout-imageview-169-inappropriate-top-margin – Eugene Brusov Oct 05 '17 at 14:53

Problems with ConstraintLayout - vertical margin doesn't work

3 Answers3

Linked