Coordinatorlayout adjustResize not collapsing toolbar when opening keyboard

Question

I have the following layout in my android app but I have a problem with windowSoftInputMode="adjustResize" in the activity. The layout contains a next button at the bottom of the screen. When the keyboard is opened, the button is overlapping the input fields instead of collapsing the toolbar.

I've tried

adding android:fitsSystemWindows="true" to the parent layout
setting adjustPan in the manifest
wrapping the constraintlayout and button in a nestedscrollview
wrapping the coordinatorlayout in a Relativelayout
Read:
- adjustResize does not work with CoordinatorLayout
- Coordinatorlayout adjustresize not working

Remarks:

The funny thing is, when I'm typing something in the first EditText field, when the text goes past the default width, only then it does resize the toolbar and collapses it.

<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.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/save_button">

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

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

        <TextView
            android:id="@+id/report_input_name_hint"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:fontFamily="@font/customfont"
            android:text="@string/report_phonenumber_name_hint"
            android:textColor="@color/light_grey"
            android:visibility="invisible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/report_input_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:background="@android:color/transparent"
            android:fontFamily="@font/customfont"
            android:hint="@string/report_phonenumber_name_hint"
            android:inputType="textPersonName"
            android:maxLength="120"
            android:textColorHint="@color/text_color_hint"
            android:textSize="@dimen/text_18sp"
            app:layout_constraintEnd_toStartOf="@+id/clear_text_button_name"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/report_input_name_hint" />

        <ImageView
            android:id="@+id/clear_text_button_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:contentDescription="@string/accessibility_image_description_clear_text_button"
            android:padding="@dimen/linespace_10dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="@+id/report_input_name"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/report_input_name"
            app:srcCompat="@drawable/icn_pro_cross" />

        <View
            android:id="@+id/textview_underline_name"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/light_grey"
            app:layout_constraintEnd_toEndOf="@+id/clear_text_button_name"
            app:layout_constraintStart_toStartOf="@+id/report_input_name"
            app:layout_constraintTop_toBottomOf="@+id/report_input_name" />

        <android.support.constraint.Barrier
            android:id="@+id/barrier2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="report_input_name,textview_underline_name,clear_text_button_name,report_input_name_hint"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textview_underline_name" />

        <TextView
            android:id="@+id/report_input_number_hint"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:fontFamily="@font/customfont"
            android:text="@string/telefoonnummer"
            android:textColor="@color/light_grey"
            android:visibility="invisible"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/barrier2" />

        <ImageView
            android:id="@+id/country_flag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:adjustViewBounds="false"
            android:contentDescription="@string/accessibility_image_description_country_flag"
            android:padding="@dimen/linespace_10dp"
            android:src="@drawable/flag_netherlands"
            app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/report_input_number" />

        <ImageView
            android:id="@+id/dropdown_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="90"
            android:src="@drawable/dropdown_arrow"
            app:layout_constraintBottom_toBottomOf="@+id/country_flag"
            app:layout_constraintStart_toEndOf="@+id/country_flag"
            app:layout_constraintTop_toTopOf="@+id/country_flag"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/country_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:fontFamily="@font/customfont"
            android:text="@string/report_phone_dutch_country_code"
            android:textColor="@color/dark_text"
            android:textSize="@dimen/text_18sp"
            app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
            app:layout_constraintStart_toEndOf="@+id/dropdown_arrow"
            app:layout_constraintTop_toTopOf="@+id/report_input_number" />

        <EditText
            android:id="@+id/report_input_number"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:background="@android:color/transparent"
            android:focusable="true"
            android:fontFamily="@font/customfont"
            android:hint="@string/report_phone_text_hint"
            android:inputType="number"
            android:maxLength="13"
            android:textColorHint="@color/text_color_hint"
            android:textSize="@dimen/text_18sp"
            app:layout_constraintEnd_toStartOf="@+id/clear_text_button"
            app:layout_constraintStart_toEndOf="@+id/country_code"
            app:layout_constraintTop_toBottomOf="@+id/report_input_number_hint" />

        <ImageView
            android:id="@+id/clear_text_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:contentDescription="@string/accessibility_image_description_clear_text_button"
            android:padding="@dimen/linespace_10dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/report_input_number"
            app:srcCompat="@drawable/icn_pro_cross" />

        <View
            android:id="@+id/textview_underline_number"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/light_grey"
            app:layout_constraintEnd_toEndOf="@+id/clear_text_button"
            app:layout_constraintStart_toStartOf="@+id/country_flag"
            app:layout_constraintTop_toBottomOf="@+id/report_input_number" />


        <TextView
            android:id="@+id/error_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:textColor="@color/emergency_button_color"
            app:layout_constraintEnd_toEndOf="@+id/textview_underline_number"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/textview_underline_number"
            app:layout_constraintTop_toBottomOf="@+id/textview_underline_number" />

    </android.support.constraint.ConstraintLayout>

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

<Button
    android:id="@+id/save_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:background="@drawable/report_next_button_background"
    android:enabled="false"
    android:text="@string/melden_input_volgende"
    android:textAllCaps="false"
    android:textColor="@color/inactive_text"
    android:textSize="@dimen/text_16sp"
    android:textStyle="bold" />

Desired result on smaller devices when there is not enough room to display the input fields + button under the expanded toolbar:

score -1 · Answer 1 · answered May 22 '18 at 13:21

Currently I have a very hacky solution which is by far from optimal. I would gladly hear if anyone has a better solution. I figured out that the toolbar won't collapse since the view that is focussed, is already visible. So now i programmatically switch focus to the last item and back to the first item to collapse the toolbar.

    report_input_number.requestFocus()

    Handler().postDelayed( {
        report_input_name.requestFocus()
    }, 350)

I'm using the following layout:

<LinearLayout 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:gravity="center|bottom"
android:orientation="vertical">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <TextView
                android:id="@+id/report_input_name_hint"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                android:text="@string/report_phonenumber_name_hint"
                android:textColor="@color/light_grey"
                android:visibility="invisible"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <EditText
                android:id="@+id/report_input_name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="8dp"
                android:background="@android:color/transparent"
                android:hint="@string/report_phonenumber_name_hint"
                android:inputType="textPersonName"
                android:maxLength="120"
                android:textColorHint="@color/text_color_hint"
                android:textSize="@dimen/text_18sp"
                app:layout_constraintEnd_toStartOf="@+id/clear_text_button_name"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/report_input_name_hint" />

            <ImageView
                android:id="@+id/clear_text_button_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:contentDescription="@string/accessibility_image_description_clear_text_button"
                android:padding="@dimen/linespace_10dp"
                android:visibility="invisible"
                app:layout_constraintBottom_toBottomOf="@+id/report_input_name"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/report_input_name"
                app:srcCompat="@drawable/icn_pro_cross" />

            <View
                android:id="@+id/textview_underline_name"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="8dp"
                android:background="@color/light_grey"
                app:layout_constraintEnd_toEndOf="@+id/clear_text_button_name"
                app:layout_constraintStart_toStartOf="@+id/report_input_name"
                app:layout_constraintTop_toBottomOf="@+id/report_input_name" />

            <TextView
                android:id="@+id/report_input_number_hint"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="@string/telefoonnummer"
                android:textColor="@color/light_grey"
                android:visibility="invisible"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textview_underline_name" />

            <ImageView
                android:id="@+id/country_flag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:adjustViewBounds="false"
                android:contentDescription="@string/accessibility_image_description_country_flag"
                android:padding="@dimen/linespace_10dp"
                android:src="@drawable/flag_netherlands"
                app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/report_input_number" />

            <ImageView
                android:id="@+id/dropdown_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:rotation="90"
                android:src="@drawable/dropdown_arrow"
                app:layout_constraintBottom_toBottomOf="@+id/country_flag"
                app:layout_constraintStart_toEndOf="@+id/country_flag"
                app:layout_constraintTop_toTopOf="@+id/country_flag"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/country_code"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"
                android:text="@string/report_phone_dutch_country_code"
                android:textColor="@color/dark_text"
                android:textSize="@dimen/text_18sp"
                app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
                app:layout_constraintStart_toEndOf="@+id/dropdown_arrow"
                app:layout_constraintTop_toTopOf="@+id/report_input_number" />

            <EditText
                android:id="@+id/report_input_number"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:background="@android:color/transparent"
                android:focusable="true"
                android:hint="@string/report_phone_text_hint"
                android:inputType="number"
                android:maxLength="13"
                android:textColorHint="@color/text_color_hint"
                android:textSize="@dimen/text_18sp"
                app:layout_constraintEnd_toStartOf="@+id/clear_text_button"
                app:layout_constraintStart_toEndOf="@+id/country_code"
                app:layout_constraintTop_toBottomOf="@+id/report_input_number_hint" />

            <ImageView
                android:id="@+id/clear_text_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:contentDescription="@string/accessibility_image_description_clear_text_button"
                android:padding="@dimen/linespace_10dp"
                android:visibility="invisible"
                app:layout_constraintBottom_toBottomOf="@+id/report_input_number"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/report_input_number"
                app:srcCompat="@drawable/icn_pro_cross" />

            <View
                android:id="@+id/textview_underline_number"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="8dp"
                android:background="@color/light_grey"
                app:layout_constraintEnd_toEndOf="@+id/clear_text_button"
                app:layout_constraintStart_toStartOf="@+id/country_flag"
                app:layout_constraintTop_toBottomOf="@+id/report_input_number" />


            <TextView
                android:id="@+id/error_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="8dp"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:textColor="@color/emergency_button_color"
                app:layout_constraintEnd_toEndOf="@+id/textview_underline_number"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="@+id/textview_underline_number"
                app:layout_constraintTop_toBottomOf="@+id/textview_underline_number" />

        </android.support.constraint.ConstraintLayout>

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

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

<Button
    android:id="@+id/save_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/activity_horizontal_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_horizontal_margin"
    android:layout_weight="0"
    android:background="@drawable/report_next_button_background"
    android:enabled="false"
    android:text="@string/melden_input_volgende"
    android:textAllCaps="false"
    android:textColor="@color/inactive_text"
    android:textSize="@dimen/text_16sp"
    android:textStyle="bold" />
</LinearLayout>

why downvote? I would gladly accept better solutions if they are provided — Tim, May 30 '18 at 12:09

score -1 · Answer 2 · answered Aug 09 '19 at 09:57

You need to set on the CoordinatorLayout:

android:fitsSystemWindows="false"

This value is default true. In your Android Manifest you need to set the following for the Activity related:

windowSoftInputMode="adjustResize"

I found the solution to the question in this article: https://code.luasoftware.com/tutorials/android/move-layout-when-keyboard-shown/

I know it's been a while since someone wrote on this thread, but since I came along this as well, I wanted to share my results.

score -2 · Answer 3 · answered May 17 '18 at 11:27

-2

Use adjustpan. It will solve your issue.

answered May 17 '18 at 11:27

Koustuv Ganguly

897
7
21

Sorry, forgot to mention, i've also tried that. But I want to display the button above the keyboard, since there is room for it when the toolbar is collapsed – Tim May 17 '18 at 11:29
I think you didn't noticed what the author have replied.Thanks! – Koustuv Ganguly May 17 '18 at 12:31

Coordinatorlayout adjustResize not collapsing toolbar when opening keyboard

3 Answers3