Scrollable screen on soft keyboard open, using Constraint layout

Question

How do we make the screen scrollable when the soft keyboard opens up, while using Constraint layout. It can be achieved with flag 'adjustResize' in manifest, while using Linear layout inside Scrollview. But the behaviour is different while using Constraint layout inside Scrollview. How do we achieve the required behaviour while using Constraint layout?

The following images show my screen when the soft Keyboard is not open, and when the keyboard is open.

This is my screen when the soft keyboard is NOT open

This is my screen when the soft keyboard is open

I have been looking for a solution to this since days, but I'm not able to find. Please help!

EDIT:

I have currently modelled my XML as:

 <Constraint layout>
             <NestedScrollView>
                         <Constraint layout>
                         </Constraint layout>
            </NestedScrollView>
    
            <Constraint layout>
            </Constraint layout>
    
</Constraint layout>

It's not working.

EDIT 2:

My actual XML is:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/dark_blue"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:isScrollContainer="true"
        android:fillViewport="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/clProgressSignUp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".SignupActivity">
    <ImageView
        android:id="@+id/ivLogo"
        android:layout_width="@dimen/_148sdp"
        android:layout_height="@dimen/_60sdp"
        android:src="@drawable/logo_voodlee"
        app:layout_constraintVertical_bias="0.08"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

            <TextView
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name as on Pan Card"
                android:visibility="visible"
                app:fontFamily="@font/poppins_regular"
                android:textColor="@color/fade_green"
                android:textSize="@dimen/_11ssp"
                app:layout_constraintVertical_bias="0.285"
                app:layout_constraintHorizontal_bias="0.135"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

            <EditText
                android:id="@+id/etName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name as on Pan Card"
                android:gravity="left"
                android:inputType="textVisiblePassword"
                android:background="@drawable/bg_edittext_thin_line_bright_green"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:lineSpacingExtra="@dimen/_3sdp"
                app:fontFamily="@font/poppins_regular"
                android:textColor="@color/bright_green"
                android:textColorHint="@color/fade_green"
                android:textSize="@dimen/dimen_20dp"
                android:importantForAutofill="no"
                app:layout_constraintVertical_bias="0.31"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>


            <TextView
                android:id="@+id/tvEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email"
                android:visibility="visible"
                app:fontFamily="@font/poppins_regular"
                android:textColor="@color/fade_green"
                android:textSize="@dimen/_11ssp"
                app:layout_constraintVertical_bias="0.4"
                app:layout_constraintHorizontal_bias="0.091"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

            <EditText
                android:id="@+id/etEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textVisiblePassword"
                android:hint="Email"
                android:gravity="left"
                android:background="@drawable/bg_edittext_thin_line_bright_green"
                android:lineSpacingExtra="@dimen/_3sdp"
                app:fontFamily="@font/poppins_regular"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:textColor="@color/bright_green"
                android:textColorHint="@color/fade_green"
                android:textSize="@dimen/dimen_20dp"
                android:importantForAutofill="no"
                app:layout_constraintVertical_bias="0.43"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

            <TextView
                android:id="@+id/tvErrorMsgEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="invisible"
                android:text="* Please enter valid email address"
                android:textSize="@dimen/_10ssp"
                android:textColor="@color/voodlee_red"
                app:fontFamily="@font/poppins_regular"
                android:layout_marginTop="@dimen/_4sdp"
                app:layout_constraintHorizontal_bias=".1375"
                app:layout_constraintVertical_bias="0.47"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

            <TextView
                android:id="@+id/tvMob"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mobile Number"
                android:gravity="center_vertical"
                android:visibility="visible"
                app:fontFamily="@font/poppins_regular"
                android:textColor="@color/fade_green"
                android:textSize="@dimen/_11ssp"
                app:layout_constraintVertical_bias="0.515"
                app:layout_constraintHorizontal_bias="0.115"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

            <EditText
                android:id="@+id/etMob"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="phone"
                android:hint="Mobile Number"
                android:gravity="left"
                android:lineSpacingExtra="@dimen/_3sdp"
                android:layout_marginLeft="@dimen/_20sdp"
                android:layout_marginRight="@dimen/_20sdp"
                android:textColor="@color/bright_green"
                android:textColorHint="@color/fade_green"
                android:textSize="@dimen/dimen_20dp"
                app:fontFamily="@font/poppins_regular"
                android:background="@drawable/bg_edittext_thin_line_bright_green"
                android:importantForAutofill="no"
                app:layout_constraintVertical_bias="0.55"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

            <TextView
                android:id="@+id/tvErrorMsgMobile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="invisible"
                android:text="* Please enter valid mobile number"
                android:textSize="@dimen/_10ssp"
                android:textColor="@color/voodlee_red"
                app:fontFamily="@font/poppins_regular"
                android:layout_marginTop="@dimen/_4sdp"
                app:layout_constraintHorizontal_bias=".135"
                app:layout_constraintVertical_bias="0.5875"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"

                />

            <CheckBox
                android:id="@+id/cbTnc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:buttonTint="@color/bright_green"
                app:layout_constraintHorizontal_bias="0.08"
                app:layout_constraintVertical_bias="0.65"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

            <TextView
                android:id="@+id/tvAgree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="I agree to the"
                android:textSize="@dimen/dimen_14dp"
                android:textColor="@color/bright_green"
                app:fontFamily="@font/poppins_regular"
                app:layout_constraintHorizontal_bias="0.21"
                app:layout_constraintVertical_bias="0.65"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

            <TextView
                android:id="@+id/tvTnc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="terms and conditions"
                android:textColor="@color/text_highlight"
                android:textSize="@dimen/dimen_14dp"
                app:fontFamily="@font/poppins_regular"
                app:layout_constraintHorizontal_bias="0.1"
                app:layout_constraintVertical_bias="0.65"
                app:layout_constraintLeft_toRightOf="@id/tvAgree"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

            
    <Button
        android:id="@+id/btnNextSignUp"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_36sdp"
        android:background="@drawable/bg_btn_proceed_enabled"
        android:layout_margin="@dimen/_25sdp"
        android:text="Proceed"
        android:textColor="@color/dark_blue"
        android:textAllCaps="false"
        android:textSize="@dimen/dimen_20dp"
        android:onClick="onClickNext"
        android:fontFamily="@font/poppins_semi_bold"
        android:foreground="?attr/selectableItemBackground"
        app:layout_constraintVertical_bias="0.825"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


    <TextView
        android:id="@+id/tvAlreadyHave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_highlight"
        android:text="Already have an account?"
        app:fontFamily="@font/poppins_regular"
        android:textSize="@dimen/dimen_15dp"
        android:textStyle="bold"
        app:layout_constraintVertical_bias="0.87"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
        
    </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

            <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/clProgressSignUp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:layout_constraintVertical_bias="0.96"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">
                .
                .
                .
                .
                .
                .
                .
                .

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Bushra Amjad · Answer 1 · 2021-02-02T16:18:37.997

0

You need to model your .xml file like this

Root layout: ConstraintLayout
Child: ScrollView / NestedScrollView
NestedScrollView Child: ConstraintLayout
Bottom layout: LinearLayout(can be RelativeLayout/ConstraintLayout)

edited Feb 02 '21 at 16:18

answered Feb 02 '21 at 15:34

Bushra Amjad

31
4

Can the child of root layout be any of Scrollview and NestedScrollView? – Sparsh Dutta Feb 02 '21 at 15:44
Also, is the 'Bottom layout' mandatory when I can accommodate my views in the Constraint layout that is the direct child of Scrollview? – Sparsh Dutta Feb 02 '21 at 15:46
I have modelled my XML as: – Sparsh Dutta Feb 02 '21 at 16:05
Yes it can be NestedScrollView or ScrollView. And it is mandatory to add "Bottom Layout" keeping its height to "Match parent" and width to "Wrap content" – Bushra Amjad Feb 02 '21 at 16:15
It would be great if you update your question with .xml file. – Bushra Amjad Feb 02 '21 at 16:16
Added the XML in question. Pls check. – Sparsh Dutta Feb 02 '21 at 16:27
In your inner constraint layout add these following tags android:isScrollContainer="true" app:layout_constraintBottom_toTopOf="@+id/clProgressSignUp" – Bushra Amjad Feb 02 '21 at 16:37
Did that, still not working. Now my inner constraint layout looks like: – Sparsh Dutta Feb 02 '21 at 16:57

score 0 · Accepted Answer · answered Mar 12 '21 at 10:08

Solved it by removing android: fillViewPort = "true" attribute from NestedScrollview, and adding an empty view at the end of layout like this:

<View
    android:id="@+id/view1"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_20sdp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@id/clProgressSignUp"
    />

This made the screen scrollable, and fulfilled the requirement after using the layout as above and using the flag android:windowSoftInputMode="adjustResize" in manifest for the Activity.

HI! I have the same problem as you... what's your working final solution? — Lubron, Oct 26 '22 at 12:27

Scrollable screen on soft keyboard open, using Constraint layout

2 Answers2

Linked