How to implement Search Bar like gmail app in andr

Question

I am trying to implement the Search functionality in my android app similar to latest gmail app (search icon in the action bar).

On tapping the Search icon, the action bar turns into a search field with a back button on the left side, and a microphone button on the right side. I want to have the same component in my app.

Is there any library or tutorial for this?

Is this possible to support this type of material design search in non-lollipop versions too. ?

Answer 1

This library to do this, the only thing it does not do is the ripples, but I expect you could implement them quite easily with other resources:

https://github.com/Quinny898/PersistentSearch

Here the image of the work done in it.

Answer 2

There are two out of the box APIs provided by Google called Search Dialog and Search View. You can use one or another - or both - to implement the desired behaviour. It alreads gives you a lot of what you want. The following link has a tutorial for it: http://developer.android.com/guide/topics/search/search-dialog.html

Answer 3

i don´t know about the lollipop version, but if you want a search like that, you can add this "main_activity_actions" to your action bar:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    <item android:id="@+id/action_search"
          android:title="@string/action_search"
          android:icon="@drawable/ic_action_search"
          yourapp:showAsAction="ifRoom|collapseActionView"
          yourapp:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

and override this in your java:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);
    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    // Configure the search info and add any event listeners
    ...
    return super.onCreateOptionsMenu(menu);
}

more information here, is the part of the dictionary but is the same idea, see ya!