SearchView inside Coordinator layout

Question

How can i achieve following layout design where on scrolling up i just get the view with searchview :

1 ----

2------On Scrolling up :

I've tried putting views at certain places in the layout but searchview always ends up in the top most area instead of below home logo or not even visible.

My current layout without any searchview is :

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CFD8DC"
android:fitsSystemWindows="true"
tools:context="com.example.svatts.my22.ScrollingActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">


    <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="?android:attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                app:layout_collapseMode="pin"

                app:popupTheme="@style/AppTheme.PopupOverlay">

            </android.support.v7.widget.Toolbar>


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

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

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

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

Try [NestedScrollView](http://stackoverflow.com/a/30574304/6005977) — Ankita Shah, Nov 29 '16 at 10:22
can u elaborate a bit more , i am already using nestedscrollview in content_scrolling which does the purpose of having `app:layout_behavior=@string/appbar_scrolling_view_behaviour` — devcodes, Nov 29 '16 at 12:04

jobbert · Answer 1 · 2016-11-29T14:04:31.927

Change your entire toolbar into the following and mind this line:

app:layout_scrollFlags="scroll|enterAlways|snap"



<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap">

Then under your toolbar add your view with tabMode scrollable like this:

<your.search.layout
        android:id="@+id/your_search_layout_id"
        android:layout_width="match_parent"
        android:layout_height="your_height"
        app:tabMode="scrollable"/>

And add following layout to your content_scrolling you want to scroll with the tab bar

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Working Example

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>


<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

I just tried this , the editText that i used as search view , is coming on the very top (just under the status bar) , and on scrolling up it disappears. — devcodes, Nov 29 '16 at 11:43
Added a working example. With following gradle build versions: compileSdkVersion 23 buildToolsVersion "23.0.3" — jobbert, Nov 29 '16 at 14:20
i'll post an answer with working code of mine , the issue got resolved when i changed the height of CollapsingToolbarLayout from match_parent to any value , and simply added an edittext below toolbar then . — devcodes, Dec 05 '16 at 16:46

score 0 · Answer 2 · answered Nov 29 '16 at 11:11

0

You can use NestedScrollView for this purpose along with AppBarLayout. For better compatibility use EditText instead of SearchView.

More information here.

answered Nov 29 '16 at 11:11

AlphaQ

656
8
18

SearchView inside Coordinator layout

2 Answers2