Search code examples
androidandroid-coordinatorlayoutandroid-collapsingtoolbarlayoutandroid-appbarlayout

How to make CollapsingToolbar with "wrap_content" height?

I want to make search toolbar which appears on swipe down and collapses on swipe up, regardless of scroll level. I encountered a problem when I wanted to set height of this toolbar exactly as search area. On swipe down it's fine. but on swipe up search icon is still visible. enter image description here If I change AppBarLayout android:layout_height="wrap_content" to 100dp, for example, it becomes possible to hide toolbar, to but it looks bad and may cause problems on different resolutions. Example of what I want to achieve is search in Play Market app, how it's done there? 

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="test.proekt101_test.MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:layout_height="wrap_content">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        >
                    <SearchView
                    android:id="@+id/searchView1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="30dp"
                    >
                </SearchView>
                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>

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

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

  • Try adding android:fitsSystemWindows="true" to SearchView as well.

    android:fitsSystemWindows="true" is supposed to be on CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and the ImageView inside it.

    From here. Worked for me.