Toolbar is hiding when keyboard is shown

Hello,

I’m trying to develop a chat screen where the view hierarchy is like this:

  • a parent fragment with a coordinator layout that contains a toolbar and a frame layout;
  • a child fragment that contains a constraint layout with a recycler view, an edit text and a button (both of them constrained to the bottom of the screen - similar to what WhatsApp does).

You can find both of the layouts below.

The issue is that when the soft keyboard is shown, the toolbar gets scrolled and hidden. I want to keep it in place whether the keyboard is visible or not.

The coordinator layout already has the fitsSystemWindow attribute set to true, the frame layout has the attribute app:scrolling_behaviour set to appbar_scrolling_view_behavior and I’ve already tried to change the activity’s windowSoftInputMode attribute from adjustPan to adjustResize and even adjustNothing but without results.
I even tried to use a collapsing toolbar with the same height as the toolbar in order to use the titleEnabled="false" and layout_collapseMode="pin".

I feel like I got stuck in a loop and literally cannot find any workaround to this.

Parent fragment:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:titleEnabled="false"
            app:layout_scrollFlags="noScroll"
            app:layout_collapseMode="pin"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="?colorPrimary"
            android:elevation="@dimen/toolbar_elevation"
            app:layout_scrollFlags="noScroll"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/Toolbar"
            app:layout_collapseMode="pin"
            app:elevation="@dimen/toolbar_elevation"
            app:navigationIcon="@drawable/ic_keyboard_arrow_down_white_24"
            app:theme="@style/Toolbar"
            app:title="@string/settings_live_chat_label" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:isScrollContainer="true"
        app:defaultNavHost="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:navGraph="@navigation/nav_graph_live_chat" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Child fragment:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/list_background"
            android:focusableInTouchMode="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recycler_view"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginTop="@dimen/small_margin"
                    android:clipToPadding="false"
                    app:layout_constraintBottom_toTopOf="@id/edit_text_message"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0" />

                <EditText
                    android:id="@+id/edit_text_message"
                    style="@android:style/TextAppearance.Small"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="16dp"
                    android:background="@drawable/round_corners_bar"
                    android:hint="@string/livechat_message_hint"
                    android:inputType="textMultiLine|textCapSentences"
                    android:maxLines="3"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/send_message"
                    app:layout_constraintStart_toStartOf="parent" />

                <ImageView
                    android:id="@+id/send_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:src="@drawable/ic_send_accent_24dp"
                    app:layout_constraintBottom_toBottomOf="@id/edit_text_message"
                    android:layout_marginEnd="8dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="@id/edit_text_message" />
            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</layout>

I do not use much from the Material Components for Android. I know that I have never used CollapsingToolbarLayout, and I suspect that I have never used AppBarLayout.

But… why are you using CollapsingToolbarLayout if you do not want that collapsing behavior? Should this just be an ordinary Toolbar without all the extra stuff?

Otherwise, what are your rules for when you do want a collapse and when you do not want a collapse?

1 Like

The collapsing toolbar was just a hack I tried because I thought that I could keep the toolbar unscrollable as you can see I set the noScroll flag on it, as well as the “pin” on the toolbar. Using Toolbar didn’t work neither.

So I want to keep the toolbar in place, without it being scrolled and hidden when the keyboard is up. As you can see in the image below, even if the keyboard is shown, the Toolbar isn’t hidden.

Any tips are appreciated! Thank you! :grinning:

In that layout, I would expect something like a ConstraintLayout with:

  • A Toolbar constrained to the top
  • The bottom row of widgets constrained to the bottom
  • A RecyclerView spanning the space between them, with height of 0dp

Then, I would expect adjustResize to squish the RecyclerView and leave the Toolbar and bottom widgets visible.

If that’s not working, create a sample project that demonstrates the problem, and I can try to take a peek at it.

1 Like

I finally managed to solve the issue. What I forgot to mention is that the parent fragment described earlier was in fact a bottom sheet fragment. I was trying to apply softInputMode to the activity, when in fact it had to be applied to the dialog of the bottom sheet.

Thank you for your help and time! :smile:

1 Like