Android Persistent Search Bar in Toolbar

Question

I am fairly new to Android development. I went through the Google Udacity course and am currently trying to code an app. Specifically, I'm trying to switch over my current app (written in QT) to native Android.

What I am trying to do is making something similar to this:

Which was taken from the Material Design - Persistent search, with navigation drawer question on the User Experience Stack Exchange.

I can do the top part, but I cannot figure out how to get the persistent search bar at the bottom. I've been trying different solutions (custom theme for activitybar and toolbar), but have not been able to get something even remotely close. Could someone help me out with this?

That is two toolbars, one set as the support action bar for the activity (with elevation of 0dp) and one below it with 4dp elevation and layout_margin of 16dp. The values here I am assuming, but I think are right. The widget that controls the searching is a SearchView which is a menu item in the second toolbar. — Lucas Crawford, Jan 28 '16 at 17:49
Wow I didn't even think of using this approach! Thank you, going to try it now. — nerras, Jan 28 '16 at 18:22
When you say udacity course, did you mean the nanodegree or just one of the courses? I'm taking the nanodegree course now — Lucas Crawford, Jan 28 '16 at 18:50
This is the one I took: https://www.udacity.com/course/viewer#!/c-ud853/l-1395568821/m-1643858568 — nerras, Jan 28 '16 at 19:25

score 1 · Answer 1 · answered Sep 16 '16 at 05:11

just need to put all together inside AppBarLayout. Toolbar and any library for persisten search. Here is very useful, so finally set your layout_height for AppBarLayout. something like this

<android.support.design.widget.AppBarLayout
    android:id="@id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/margin_130"
    android:background="@drawable/bg_tab_degraded"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

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

    <com.arlib.floatingsearchview.FloatingSearchView
        android:id="@+id/floating_search_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_tab_degraded"
        app:floatingSearch_searchBarMarginLeft="@dimen/margin_20"
        app:floatingSearch_searchBarMarginTop="@dimen/margin_5"
        app:floatingSearch_searchBarMarginRight="@dimen/margin_20"
        app:floatingSearch_searchHint="Search..."
        app:floatingSearch_suggestionsListAnimDuration="250"
        app:floatingSearch_showSearchKey="false"
        app:floatingSearch_leftActionMode="showSearch"
        app:floatingSearch_menu="@menu/main"
        app:floatingSearch_close_search_on_keyboard_dismiss="true"/>



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

I hope, It will help you. Good luck.

Aditya Vyas-Lakhan · Answer 2 · 2016-09-16T06:02:30.693

You can try PersistentSearch

search = (SearchBox) findViewById(R.id.searchbox);
for(int x = 0; x < 10; x++){
    SearchResult option = new SearchResult("Result " + Integer.toString(x), getResources().getDrawable(R.drawable.ic_history));
    search.addSearchable(option);
}       
search.setLogoText("My App");
search.setMenuListener(new MenuListener(){

        @Override
        public void onMenuClick() {
            //Hamburger has been clicked
            Toast.makeText(MainActivity.this, "Menu click", Toast.LENGTH_LONG).show();              
        }

    });
search.setSearchListener(new SearchListener(){

    @Override
    public void onSearchOpened() {
        //Use this to tint the screen
    }

    @Override
    public void onSearchClosed() {
        //Use this to un-tint the screen
    }

    @Override
    public void onSearchTermChanged() {
        //React to the search term changing
        //Called after it has updated results
    }

    @Override
    public void onSearch(String searchTerm) {
        Toast.makeText(MainActivity.this, searchTerm +" Searched", Toast.LENGTH_LONG).show();

    }

    @Override
    public void onResultClick(SearchResult result){
        //React to a result being clicked
    }


    @Override
    public void onSearchCleared() {

    }

});

Also check https://github.com/UsherBaby/SearchView-1

Does not seem like exactly what the OP wants to achieve. – anthonymonori Sep 16 '16 at 05:44 — anthonymonori, Sep 16 '16 at 05:44
below toolbar just add this search view – Aditya Vyas-Lakhan Sep 16 '16 at 05:57 — Aditya Vyas-Lakhan, Sep 16 '16 at 05:57

score 0 · Answer 3 · answered Sep 12 '18 at 07:13

0

You can try this.i have used this github library

https://github.com/arimorty/floatingsearchview

answered Sep 12 '18 at 07:13

Syed Danish Haider

1,334
11
15

Android Persistent Search Bar in Toolbar

3 Answers3