Bottom of ScrollView clipped when using ConstraintLayout

Question

I have an issue using a ScrollView inside ConstraintLayout (constraint-layout:1.0.0-beta3)

The content of my ScrollView isn't showed entirely.

Here is my layout:

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Constraint Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/header"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

And here is the result

As you can see the button isn't visible and I reached the bottom of my ScrollView.

It seems to works well with LinearLayout with layout below

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#212121">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Linear Layout"
            android:textSize="45sp"/>

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON"
                android:layout_marginTop="800dp"/>


        </LinearLayout>

    </ScrollView>

</LinearLayout>

And result is

With LinearLayout end of ScrollView is reachable.

Is there a bug with ConstraintLayout or do I made something wrong?

Answer 1

The way I would have done it is:

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:text="Constraint Layout"
        android:textSize="45sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="BUTTON"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent" />

        </android.support.constraint.ConstraintLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

Which gives:

A few things to keep in mind:

• you don't need a linearlayout for the header, you can just use the textview directly.
• don't use match_parent, it might seem to work, but is undefined. Use 0dp instead with the correct constraints to stretch the view as you want.
• clearly, don't use a 800dp margin. It might look ok on your particular screen, but won't give you what you want on different devices.
• scrollview by default will wrap its content -- the fillViewport attribute is here to make it takes the indicated space
• you can use nested ConstraintLayout when it makes sense. In the future, we might also take advantage of it to do some performance improvements