Android Constraint layout bottom element overlaps when keyboard pops up

user_2518701 0
Viewed 1087

In Constraint layout, Its a form with name,address,country,city,zip,state and save button with app:layout_constraintBottom_toBottomOf="parent" constraint at the bottom. But save button overlaps state input field when keyboard pops up.

The button view should always stick to bottom it can't constraint to other views.

    <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:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/c_billing_address_root"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".activities.subscription.ui.fragments.BillingAddressFragment">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/edt_in_name"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_name"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/name_hint_label"
                android:inputType="textPersonName" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/edt_in_address"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/edt_in_name">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_address"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/address_hint_label"
                android:inputType="textPostalAddress" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/edt_in_country"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/edt_in_address">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_country"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/county_hint_label"
                android:inputType="text" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout

            android:id="@+id/edt_in_city"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/edt_in_country">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_city"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/city_hint_label" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/edt_in_zip"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/edt_in_city">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_zip"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/zip_hint_label"
                android:inputType="number" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout

            android:id="@+id/edt_in_state"
            style="@style/Widget.TextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/edt_in_zip">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edt_state"
                style="@style/Widget.EditTextStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/province_hint_label"
                android:inputType="text" />
        </com.google.android.material.textfield.TextInputLayout>

                
        <Button
            android:id="@+id/btn_save"
            style="@style/Widget.Button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/save_label"
            app:layout_constraintBottom_toBottomOf="parent" />

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

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

enter image description here

enter image description here

android-constraintlayout android
3 Answers

As mentioned above, rearrange your scrollable and non-scrollable elements like this:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollViewInitialCompanySelection"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@+id/buttonSave"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayoutInitialCompanySelection"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

<!--            <your scrollable views here>-->

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <Button
        android:id="@+id/buttonSave"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Save &amp; Continue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
user_58903210

In the project AndroidManifest.xml corresponding in the file <activity/> Tag add the following properties

android:windowSoftInputMode="adjustPan"
user_110477290

Yes it will Overlap because your save button is not constraint with state field, your save button is constraint with parent bottom so when your keyboard popups then your parent bottom is top of the keyboard you should use:

app:layout_constraintBottom_toBottomOf="@id/edt_state"

then it will always under that state field along under editText of state field. You can also add this button field in different layout with relative bottom to other layout.

user_126762470
Related