Not so permanent SearchView

[rpgsoftware]

Hi,

I'm wondering if it's possible to set this up inside the Toolbar and still keep the overlay and suggestions when I start a search query? I can place the component inside the toolbar but I lose the overlay and suggestions :( essentially I want to reproduce the look and feel of the Play Store searchview.

Great library! Thanks!

[arimorty]

Hi,

You can put the view on top of all your other views in, for example, a FrameLayout. Your views underneath the invisible part will still get the touches.

[rpgsoftware]

How would that work for example in your sample app? I tried doing that with the framelayout included in the app but the searchview still overlays and doesn't rollup when I scroll the list.

[arimorty]

The library does not currently provide you with a way to do the scrolling behavior, it might be added as a feature in future releases.

[rpgsoftware]

Thanks for answering. I'm at my wits end here trying to emulate that behaviour.

[asbadve]

Well you can put the floating search view in the toolbar and what ever you want you can do it.If no what exactly behavior you want?

[rpgsoftware]

I want to emulate the behaviour of the Play Store searchview: http://i.imgur.com/6kX7BQX.gifv If you open the app you'll see that the searchview looks exactly like this one but it is hidden or shown along with the Toolbar depending on how you scroll the list. I can put floatingsearchview inside the toolbar to obtain this behaviour but I lose the overlay and suggestions and I'm trying to find a way to keep that integral part of the searchview while putting it inside the Toolbar.

[asbadve]

<?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:fitsSystemWindows="true"
    tools:context="com.eagleeye.kotapp.waiterScreen.ui.activity.SearchActivity">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            app:contentInsetEnd="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetStart="0dp"
            app:popupTheme="@style/AppTheme.PopupOverlay">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            app:tabGravity="fill"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_layout" />//your other layout content

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/search_results_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="5dp"
            android:layout_marginStart="5dp"
            android:clipToPadding="false"
            android:paddingTop="60dp"
            android:visibility="visible" />

        <com.arlib.floatingsearchview.FloatingSearchView
            android:id="@+id/floating_search_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            app:floatingSearch_dimBackground="false"
            app:floatingSearch_leftActionMode="showSearch"
            app:floatingSearch_searchBarMarginLeft="@dimen/search_view_inset"
            app:floatingSearch_searchBarMarginRight="@dimen/search_view_inset"
            app:floatingSearch_searchBarMarginTop="@dimen/search_view_inset"
            app:floatingSearch_searchHint="Search Product"
            app:floatingSearch_showSearchKey="false"
            app:floatingSearch_suggestionsListAnimDuration="250" />
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        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:visibility="visible" />

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

use this layout file you will get the desire look.And use that recycler view to show your search result.after the search action done clicked if you want.

[arimorty]

@rpgsoftware you can achieve what you want by adding an offset listener (have a look here, if you aren't familiar with it) to your visible or invisible AppBarLayout and move the FloatingSearchView 's Y translation accordingly.

All the best,

[rpgsoftware]

@asbadve maybe I missed something but I tried the code and the floatingsearchview is still always shown regardless of how I scroll the list. I did have to do some changes so it worked with the floatingsearchview sample code:

<?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:fitsSystemWindows="true">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetEnd="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetStart="0dp"
            app:popupTheme="@style/AppTheme.PopupOverlay">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorHeight="4dp"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </android.support.design.widget.AppBarLayout>

    <!--your other layout content-->
    <include layout="@layout/content_layout" />

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/search_results_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="5dp"
            android:layout_marginStart="5dp"
            android:clipToPadding="false"
            android:paddingTop="60dp"
            android:visibility="visible" />

        <com.arlib.floatingsearchview.FloatingSearchView
            android:id="@+id/floating_search_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            app:floatingSearch_dimBackground="false"
            app:floatingSearch_leftActionMode="showSearch"
            app:floatingSearch_searchBarMarginLeft="@dimen/search_view_inset"
            app:floatingSearch_searchBarMarginRight="@dimen/search_view_inset"
            app:floatingSearch_searchBarMarginTop="@dimen/search_view_inset"
            app:floatingSearch_searchHint="Search Product"
            app:floatingSearch_showSearchKey="false"
            app:floatingSearch_suggestionsListAnimDuration="250" />
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        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:visibility="visible" />

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

content_layout is just an empty linearlayout.

@arimorty I'll delve into it and report back. Thanks!

[rpgsoftware]

Hello everyone,

@arimorty I tried the AppBarLayout offset listener but sadly the event was (very) noticeably late to reach the searchview so the rolled up behaviour wasn't aligned. When the toolbar was rolled up the searchview was too far behind. I ended up going the CoordinatorLayout.Behavior route and it worked perfectly (so far). Essentially I took this one and modified it to look like this:

public class ScrollingSearchViewBehavior
        extends CoordinatorLayout.Behavior<FloatingSearchView> {

    public ScrollingSearchViewBehavior(Context context, AttributeSet attrs) {
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingSearchView child, View dependency) {
        return super.layoutDependsOn(parent, child, dependency) || (dependency instanceof AppBarLayout);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingSearchView searchView, View appbarLayout) {
        boolean returnValue = super.onDependentViewChanged(parent, searchView, appbarLayout);
        if (appbarLayout instanceof AppBarLayout) {
            searchView.setTranslationY(appbarLayout.getY());
        }
        return returnValue;
    }
}

The searchview has to be inside a CoordinatorLayout and in the xml declaration it has to be declared this way:

<com.arlib.floatingsearchview.FloatingSearchView
            android:id="@+id/searchView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior=".ScrollingSearchViewBehavior" />

I know this is stating the obvious to you guys, I put it here for the newbies ;)

Thanks!!

[arimorty]

@rpgsoftware "was (very) noticeably late to reach" sounds very strange to me, because I was able to create a working example using the simpler approach (with offset listener) and it was working perfectly. To me, there is no apparent benefit of going with the custom CoordinateLayout behavior approach, although I would probably do that in the library itself when implementing the scrolling behavior in order to provide an easier way for the client to achieve this behavior.

As a side note, I would be more than happy to work with you on that (integrating scrolling behavior in the library).

[rpgsoftware]

@arimorty I thought about committing something to the library but since I just found out about CoordinatorLayout.Behavior and my use case assumes that the user has an AppBarLayout I ended up discarding the idea but it sounds good. Let me know how I can be of help.

Regarding the delay, yes, it is strange. The UI events happen very quickly but I couldn't see what else could've been causing it. Whatever it was it doesn't happen using Behavior. Maybe you didn't notice it because the floatingsearchview/sample doesn't have a Toolbar? I tested it with a toolbar and tabs and it was clear that the toolbar rolled up and then the searchview followed.

[asbadve]

I have tried it using the onscrollistener in recycler view found here and the result is like this.But by using coordinate looks good and generic to me.

[rpgsoftware]

@asbadve added to my bookmarks for future reference. Thanks!