Android appcompat toolbar stretches when searchview gets focus

Question

I\'m updating an app to use the new Toolbar instead of the regular ActionBar. In my app the user must be able to select a contact from their contac

Answer 1

It seems like a old question but I want to address the real cause about this issue.

In fact, the fitsSystemWindows does not only add statusBar insets into your views padding, but also keyboard's height. So, when keyboard showed, your toolbar(which is the view who consumes window insets) will gain a bottom padding equals to your keyboard's height.

Move fitSystemWindows to root node do solve this problem, but sometimes we can't do that, for example we need toolbar's background to fill the statusbar.

So, the real solution for this issue, I think, is to tell view only consume top insets. Luckily, Android do offer a method for us to do that.

private static final View.OnApplyWindowInsetsListener CONSUME_TOP_INSET_LISTENER = new View.OnApplyWindowInsetsListener() {
    @RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH)
    @Override
    public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
        int b = v.getPaddingBottom();
        int l = v.getPaddingLeft();
        int r = v.getPaddingRight();

        v.setPadding(l, insets.getSystemWindowInsetTop(), r, b);
        int il = insets.getSystemWindowInsetLeft();
        int ir = insets.getSystemWindowInsetRight();
        int ib = insets.getSystemWindowInsetBottom();
        return insets.replaceSystemWindowInsets(il, 0, ir, ib);
    }
};
public static void makeViewConsumeTopWindowInsetsOnly(@NonNull View view) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) {
        view.setOnApplyWindowInsetsListener(CONSUME_TOP_INSET_LISTENER);
    }
}

Add above code to some place, and call this method with the view you want to consumes top insets.

Answer 2

simplest solution without changing xml and keeping translucent system bar is to add: kotlin:

toolbar.setOnApplyWindowInsetsListener { toolbar, windowInsets ->
    toolbar.updatePadding(
        windowInsets.systemWindowInsetLeft, 
        windowInsets.systemWindowInsetTop,
        windowInsets.systemWindowInsetRight,
        0
    )
    windowInsets.consumeSystemWindowInsets()
}

please check if your fitsSystemWindows=true are placed correctly.

Answer 3

In case you are using an EditText inside Toolbar, adding "flagNoExtractUi" in imeOptions , will solve the stretching edit area.

EditText for Search Action without stretching:

android:id="@+id/toolbar_editText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="text"
android:imeOptions="actionSearch|flagNoExtractUi"
android:singleLine="true" />

Answer 4

I would like to share my experience but before that I want to dropped this comment. So far, I really find this CoordinatorLayout shenanigans buggy and not worthy of being dropped in the SDK. Its just buggy. When it behaves like this erratically, the architecture on the xml layout is not much of a help to figure out whats going on. I followed the examples religiously and none of them worked.

Having said that, I am using the build tools version v24.0.2 (The latest as of this writing) and my situation may be of different than the rest. So I am putting this answer along with other answers here.

In my case, I am using this library for NavigationDrawer

As some answers here pointed out, its the navigation drawer. I tried not using that library and still having the problem. I have CoordinatorLayout as the parent layout of my two activities and programatically inserts the NavigationDrawer as instructed by the library author. The expanding Toolbar the size of the screen when focusing on an EditText is still there. Therefore, in my case, the problem is not coming from there.

Here's what I did in my case:

I removedfitsSystemWindows from the CoordinatorLayout layout of the activity. Contrary to what other people suggested here.

I am pasting my entire activity layout here:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/coordinatorlayout_homescreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.HomeScreenActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_homescreen"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin"/>

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

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

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

        <FrameLayout
            android:id="@+id/framelayout_homescreen"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

    <!--
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_homescreen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />
    -->

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

I did this on another activity and it works as expected. I don't have the expanding Toolbar anymore. But this problem occurred. I am about to pull my hair out. The status bar became white. Phoenix Wang solution on that post fix it for me and I quote his answer:

I found the answer in this link:Status Bar Color not changing with Relative Layout as root element

So it turns out we need remove the

  <item name="android:statusBarColor">@android:color/transparent</item> in

styles.xml(v21). And it works just fine for me.

My only concern is how will this solution holds in the upcoming updates. CoordinatorLayout should not be behaving like that.