Constraint layout scroll to bottom with keypad open

Question

I am using ConstraintLayout to design a sign-up screen. I have put the ConstraintLayout inside a scroll view. The user should be able to scroll and view the whole content even when the keypad is open. This feature works when I am using RelativeLayout but doesn't work when I am using ConstraintLayout. The views which are at the bottom of the screen are being hidden behind the keypad. Following is the layout I am using.

<?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="match_parent"
    android:background="#FFFFFF"
    android:paddingTop="23dp"
    android:fillViewport="true"
    tools:context="com.givhero.activities.LoginActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        tools:context="com.givhero.activities.LoginActivity">

        <ImageView
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:src="@drawable/back"
            android:tint="@color/colorPrimary"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:layout_editor_absoluteX="0dp"/>
        <TextView
            android:id="@+id/regEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="10dp"
            android:text="@string/sign_up_email"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/titles_lists"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/back"
            tools:layout_editor_absoluteX="0dp"/>

        <TextView
            android:id="@+id/nameEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/transparent"
            android:gravity="left"
            android:hint="Name"
            android:textColor="@color/dark"
            android:textColorHint="@color/dark"
            android:textSize="@dimen/base"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/regEmail"
            />

        <View
            android:id="@+id/nameDivider"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginTop="15dp"
            android:background="@color/divider"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/nameEditText"
            />

        <EditText
            android:id="@+id/emailEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/transparent"
            android:gravity="left"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:textColor="@color/dark"
            android:textColorHint="@color/dark"
            android:textSize="@dimen/base"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/nameDivider"
            />

        <View
            android:id="@+id/emailDivider"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginTop="15dp"
            android:background="@color/divider"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/emailEditText"/>

        <Button
            android:id="@+id/submitButton"
            android:layout_width="0dp"
            android:layout_height="62dp"
            android:layout_marginEnd="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:background="@drawable/button_theme"
            android:enabled="false"
            android:text="@string/sign_up"
            android:textColor="#FFFFFF"
            android:textSize="@dimen/base"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/emailDivider"
            />

        <TextView
            android:id="@+id/signUpMessage"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="30dp"
            android:padding="15dp"
            android:text="@string/sign_up_message"
            android:textColor="@color/dark80Opacity"
            android:textSize="@dimen/medium12"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/submitButton"
            />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

I have added the following in Manifest.

<activity android:name=".activities.EmailSignupActivity"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustResize">
        </activity>

Though it doesn't scroll as expected. Following are the screen shots for better understanding

As you can see I have some text below the EditText fields and signup button. What I am expecting is that the user should be able to scroll to the bottom of the page to see that text even if the keyboard is open. Please check the following screenshot when the keypad is open

I am unable to scroll the view when the keyboard is open.

EDIT Hey,

If anyone is stuck with this issue and landed here for the answer. I could finally find the solution for it. I couldn't figure out the exact reason for this issue but could figure out what is causing the layout not to scroll. Initially, I have been trying to occupy the whole screen including the status bar for design and used the following in oncreate

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

The above line has caused the issue and once I have removed it, I was able to scroll the layout. I would be happy to find the reason why is the layout not scrolling if we occupy the full screen including the status bar for design.

Answer 1

You have to set the windowSoftInputMode on your Activity on your Manifest file.

android:windowSoftInputMode="stateVisible|adjustResize"

(or android:windowSoftInputMode="stateHidden|adjustResize" if you don't want the keyboard to show when you open the activity)

and make your design of the activity to be like that

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <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">

                /* your elements here */

            </android.support.constraint.ConstraintLayout>
        </android.support.v4.widget.NestedScrollView>
    </FrameLayout>

Answer 2

You can use the ConstraintLayout within RelativeLayout to use the ScrollView. Give the fillViewport to ScrollView. I just change your code like I use to do. And you should give marginBottom to scroll when keyboard is on. Try it out. Hope it help.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
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:background="#FFFFFF"
android:paddingTop="23dp"
tools:context="com.givhero.activities.LoginActivity">

<ScrollView
    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="match_parent"
    android:layout_gravity="bottom"
    tools:context="com.givhero.activities.LoginActivity">

    <ImageView
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:src="@drawable/back"
        android:tint="@color/colorPrimary"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="0dp"/>
    <TextView
        android:id="@+id/regEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="10dp"
        android:text="@string/sign_up_email"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/titles_lists"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/back"
        tools:layout_editor_absoluteX="0dp"/>

    <TextView
        android:id="@+id/nameEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="30dp"
        android:background="@android:color/transparent"
        android:gravity="left"
        android:hint="Name"
        android:textColor="@color/dark"
        android:textColorHint="@color/dark"
        android:textSize="@dimen/base"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/regEmail"
        />

    <View
        android:id="@+id/nameDivider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="15dp"
        android:background="@color/divider"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nameEditText"
        />

    <EditText
        android:id="@+id/emailEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="30dp"
        android:background="@android:color/transparent"
        android:gravity="left"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textColor="@color/dark"
        android:textColorHint="@color/dark"
        android:textSize="@dimen/base"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/nameDivider"
        />

    <View
        android:id="@+id/emailDivider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="15dp"
        android:background="@color/divider"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailEditText"/>

    <Button
        android:id="@+id/submitButton"
        android:layout_width="0dp"
        android:layout_height="62dp"
        android:layout_marginEnd="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginStart="15dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/button_theme"
        android:enabled="false"
        android:text="@string/signup"
        android:textColor="#FFFFFF"
        android:textSize="@dimen/base"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailDivider"
        />

    <TextView
        android:id="@+id/signUpMessage"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:padding="15dp"
        android:text="@string/sign_up_message"
        android:textColor="@color/dark80Opacity"
        android:textSize="@dimen/medium12"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/submitButton"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="16dp"/>

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

Answer 3

Add this in the manifest for your activity.

android:windowSoftInputMode="stateVisible|adjustResize"