Home » Android » android – Is it possible to put a ConstraintLayout inside a ScrollView?

android – Is it possible to put a ConstraintLayout inside a ScrollView?

Posted by: admin March 11, 2020 Leave a comment

Questions:

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 ConstraintLayot. 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>
How to&Answers:

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"

Answer:

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

Found the solution here: LinearLayout not expanding inside a ScrollView

Answer:

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>

Answer:

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> 

Answer:

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.

Answer:

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

Answer:

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.

Answer:

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> 

Answer:

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

It is what was causing my application to crash.