CollapsingToolbarLayout not collapsing when EditText get focused

Question

I am using CollapsingToolBar inside CoordinatorLayout and I've NestScrollView containing some EditText as child views. What i am facing is when edittext get focused and keybaoard appear my complete view doesn't scroll up.

Below is the code and image as output of that layout.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/ivProductImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/stub_image"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

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

    <LinearLayout
        android:id="@+id/containerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp">

            <EditText
                android:id="@+id/etProductTitle"
                style="@style/EditTextStyle"
                android:hint="@string/lbl_product_title"
                android:inputType="text"
                android:textSize="24dp" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp">

            <EditText
                android:id="@+id/etProductDescription"
                style="@style/EditTextStyle"
                android:hint="@string/lbl_description"
                android:inputType="text" />
        </android.support.design.widget.TextInputLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.design.widget.TextInputLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="0.5">

                <EditText
                    android:id="@+id/etDeposit"
                    style="@style/EditTextStyle"
                    android:hint="@string/lbl_deposit"
                    android:inputType="number" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="0.5">

                <EditText
                    android:id="@+id/etPricePerDay"
                    style="@style/EditTextStyle"
                    android:hint="@string/lbl_price_per_day"
                    android:inputType="number" />
            </android.support.design.widget.TextInputLayout>
        </LinearLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp">

            <EditText
                android:id="@+id/etLocation"
                style="@style/EditTextStyle"
                android:hint="@string/lbl_add_location"
                android:inputType="text" />
        </android.support.design.widget.TextInputLayout>

        <TextView
            style="@style/SubHeading"
            android:layout_margin="10dp"
            android:text="@string/lbl_categories"
            android:textColor="@color/color_primary" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="315dp"
            android:layout_marginLeft="10dp"
            android:isScrollContainer="false"
            android:layout_marginRight="10dp"
            android:scrollbars="none" />

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

I was using `RecyclerView` inside `NestedScrollView`, by removing RecyclerView solved my problem. — Nauman Zubair, Dec 09 '15 at 07:11

romtsn · Answer 1 · 2016-11-14T13:14:01.913

5

I've resolved this by adding OnFocusChangeListener to EditText and if it has focus - just collapse view with setExpanded method:

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(final View v, boolean hasFocus) {
        if (hasFocus) {
           mAppBarLayout.setExpanded(false, true);
        }
    }
});

If you want your CollapsingToolbarLayout be collapsed every time when your other EditText's from your layout get focused, then you should set the same OnFocusChangeListener to each of them.

edited Nov 14 '16 at 13:14

answered Jan 24 '16 at 11:17

romtsn

11,704
2
31
49

2

This seems like the best solution, but it should be easier to just collapse the `CollapsingToolbarLayout` using `mAppBarLayout.setExpanded(false)`. – TR4Android Jan 26 '16 at 21:33
The reason why I didn't use `setExpanded` method is that this method has appeared only in v23 version of design library, but I've implemented it earlier. – romtsn Jan 29 '16 at 11:03

score 2 · Answer 2 · edited May 23 '17 at 12:02

RecyclerView is a scrollable widget which means, these scrollable widgets won't work with eachother.(But, RecyclerView is a child from NestedScrollingChild)

Check this question for more explanation:

How to use RecyclerView inside NestedScrollView?

But, you can use it with custom LinearLayoutManager

https://stackoverflow.com/a/32736113/4409113

By the way,

You could use that RecyclerView inside the CoordinatorLayout and outside the NestedScrollView.

Hope that helps.

score 0 · Answer 3 · answered Jan 28 '16 at 13:20

I think after all researches this is the best solution

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(final View v, boolean hasFocus) {
    if (hasFocus) {
        mAppBarLayout.setExpanded(false, true); // second one for animation
    }
}
});

CollapsingToolbarLayout not collapsing when EditText get focused

3 Answers3

Linked