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 tex

Answer 1

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.

Answer 2

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>

Answer 3

Your TextView1 doesn't have lower boundaries.

Simply add

app:layout_constraintBottom_toTopOf="@+id/textView2"

for your first textView