Is it possible to put a ConstraintLayout inside a ScrollView?

So recently, with Android Studio 2.2 there's a new ConstraintLayout that makes designing a lot easier, but unlike RelativeLayout and Linearlayout, I can't use a ScrollView to surround ConstraintLayout. Is this possible? If so, how?

i.e.

<ScrollView 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="match_parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">
        
        <android.support.constraint.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp">
            
            <!-- Have whatever children you want inside -->
            
        </android.support.constraint.ConstraintLayout>
        
</ScrollView>

Try adding android:fillViewport="true" to the ScrollView.

Found the solution here: https://stackoverflow.com/questions/2599837/linearlayout-not-expanding-inside-a-scrollview

There was a bug with ConstraintLayout inside ScrollViews and it has been fixed. google has fixed the bug in Android Studio 2.2 Preview 2 (constraintlayout 1.0.0-alpha2).

Check this link for new update (Preview 2): works properly inside ScrollView and RecycleView

Solution 1: > > The solution was to use android:fillViewport="true" on the > ScrollView

Solution 2:

> > Use NestedScrollView instead of ScrollView with android:fillViewport="true"

Edit - 09/16/20:

Currently, it is more usual to use the ScrollView with the ConstraintLayout height set to wrap_content, it works very well, don't forget the fillViewPort and that both Scroll and Nested support only one direct child.

use NestedScrollView with viewport true is working good for me

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

        </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

Don't forget that If you constraint some view's bottom to constraint layout's bottom.Scrollview could not scroll.

Set ScrollView layout_height as a wrap_content then it will work fine. Below are example which may help someone. I have used compile 'com.android.support.constraint:constraint-layout:1.0.2' for constraint layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
	android:orientation="vertical"
	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="match_parent"
	android:id="@+id/activity_main"
	tools:context=".ScrollViewActivity">

	<ScrollView
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"
		>

		<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:orientation="vertical"
			android:paddingLeft="8dp"
			android:paddingRight="8dp"
			android:scrollbars="vertical">

			<TextView
				android:id="@+id/tvCommonSurname"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="surname"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toTopOf="parent"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText3"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="text"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonSurname"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/tvCommonName"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="firstName"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText3"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="text"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonName"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/tvCommonLastName"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="middleName"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText2"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="text"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonLastName"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/tvCommonPhone"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="Phone number"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText2"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText4"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:digits="0123456789"
				android:ems="10"
				android:inputType="phone"
				android:maxLength="10"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonPhone"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/textView3"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="sex"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText4"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<RadioGroup 
                xmlns:android="http://schemas.android.com/apk/res/android"
				android:id="@+id/radiogroup"
				android:layout_width="0dp"
				android:layout_height="48dp"
				android:layout_marginTop="8dp"
				android:orientation="horizontal"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/textView3"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1">

				<RadioButton
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:text="pirates" />

				<RadioButton
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:text="ninjas" />
			</RadioGroup>

			<TextView
				android:id="@+id/tvCommonDOB"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="dob"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/radiogroup"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText5"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="date"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonDOB"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/tvCommonLivingCity"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="livingCity"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText5"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText34"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="text"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonLivingCity"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/tvCommonPlaceOfBithday"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="placeOfBirth"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText34"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<EditText
				android:id="@+id/editText6"
				android:layout_width="0dp"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:ems="10"
				android:inputType="text"
				android:maxLines="1"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/tvCommonPlaceOfBithday"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

			<TextView
				android:id="@+id/textView4"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginTop="8dp"
				android:text="education"
				android:textAppearance="?android:attr/textAppearanceLarge"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/editText6"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintTop_creator="1" />

			<Spinner
				android:id="@+id/spinner_id"
				android:layout_width="0dp"
				android:layout_height="48dp"
				android:layout_marginTop="8dp"
				android:spinnerMode="dialog"
				app:layout_constraintLeft_toLeftOf="parent"
				app:layout_constraintRight_toRightOf="parent"
				app:layout_constraintTop_toBottomOf="@+id/textView4"
				tools:layout_constraintLeft_creator="1"
				tools:layout_constraintRight_creator="1"
				tools:layout_constraintTop_creator="1" />

		</android.support.constraint.ConstraintLayout>
	</ScrollView>


</android.support.constraint.ConstraintLayout>

Try giving some padding bottom to your constraint layout like below

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="100dp">
        </android.support.constraint.ConstraintLayout>

    </ScrollView>

Anyone who has set below property to

ScrollView:: android:fillViewport="true"

constraint layout: android:layout_height="wrap_content"

And it's still not working then make sure then you have not set the Inner scrollable layout (RecycleView) bottom constraint to bottom of the parent.

Add below lines of code:

android:nestedScrollingEnabled="false"
android:layout_height="wrap_content"

Make sure to remove below constraint:

app:layout_constraintBottom_toBottomOf="parent"

Full code

   <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/selectHubLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".ui.hubs.SelectHubFragment">

    <include
        android:id="@+id/include"
        layout="@layout/signup_hub_selection_details"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_HubSelection"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:nestedScrollingEnabled="false"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include" />
</androidx.constraintlayout.widget.ConstraintLayout>

Use NestedScrollView with android:fillViewport="true"

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

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

        <!--Edit your stuff-->

    </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

Since the actual ScrollView is encapsulated in a CoordinatorLayout with a Toolbar ...

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            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="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/list"/>

</android.support.design.widget.CoordinatorLayout>

... I had to define android:layout_marginTop="?attr/actionBarSize" to make the scrolling working:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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:layout_marginTop="?attr/actionBarSize">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- UI elements here -->

    </android.support.constraint.ConstraintLayout>

</ScrollView>

Above also works with NestedScrollView instead of ScrollView. Defining android:fillViewport="true" is not needed for me.

I've spent 2 days attempting to convert layouts to ConstraintLayout in the so-called "stable" release Android Studio 2.2 and I've not got ScrollView to work in the designer. I'm not going to start down the route of adding constraints in XML for Views that are further down the scroll. After all this is supposed to be a visual design tool.

And the number of rendering errors, stack overflows and theme issues I've had has led me to conclude that the whole ConstraintLayout implementation is still riddled with bugs. Unless you are developing simple layouts then I'd leave it well alone until it's had a few more iterations at least.

That's 2 days I'm not going to get back.

I had NestedScrollView inside ConstraintLayout, and this NestedScrollView has one ConstraintLayout.

If you're facing issue with NestedScrollView,

add android:fillViewport="true" to NestedScrollView, worked.

PROBLEM:

I had a problem with ConstraintLayout and ScrollView when i wanted to include it in another layout.

DECISION:

The solution to my problem was to use dataBinding.

dataBinding (layout)

Don't forget about tools:context=".YouClassName" property in ScrollView.

It is what was causing my application to crash.