How to change action bar background on click of "Search" menu?

Question

I have gone through the Search Interface tutorial on Android Developers site and implemented successfully too.

The only thing that I haven't been able to achieve is to change the Actionbar background on click of search menu and to revert it back on clicking the "Back" button?

Below is a screenshot from Gmail app. The normal actionbar looks like this.

And when you click on Search menu it changes to one like below without changing the activity.

I want to achieve this functionality. Please help. Thanks.

Answer 1

Basically FrameLayout is created in the Gmail application which contains two views:

• Toolbar - first red Toolbar which is available in public API
• MaterialSearchActionView which contains three views
  • ImageView - with back arrow
  • EditText
  • ImageView - with "x" / "microphone"

The second view is not available in public API.

I think that the idea is easy. When you open your Activity the second view is GONE and when you press Search icon it is shown. There is no way to get MaterialSearchActionView so you have to create your own View which contains these controls.

I create small example how to do this:

DoubleActionBarActivity.class:

public class DoubleActionBarActivity extends ActionBarActivity {

    Toolbar toolbar;
    Toolbar searchToolbar;
    boolean isSearch;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_with_double_toolbar);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        searchToolbar = (Toolbar) findViewById(R.id.toolbar_search);
        prepareActionBar(toolbar);
    }

    private void prepareActionBar(Toolbar toolbar) {
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().setStatusBarColor(getResources().getColor(isSearch ? android.R.color.darker_gray : android.R.color.holo_red_dark));
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(isSearch ? R.menu.search_for_second_toolbar : R.menu.search_item_only, menu);
        if (isSearch) {
            final SearchView search = (SearchView) menu.findItem(R.id.action_search).getActionView();

            search.setIconified(false);
            search.setQueryHint("search");
            search.setOnCloseListener(new SearchView.OnCloseListener() {
                @Override
                public boolean onClose() {
                    return true;
                }
            });
        }
        return super.onCreateOptionsMenu(menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case R.id.action_search:{
                isSearch = true;
                searchToolbar.setVisibility(View.VISIBLE);
                prepareActionBar(searchToolbar);
                supportInvalidateOptionsMenu();
                return true;
            }
            case android.R.id.home:
                if(isSearch){
                    isSearch = false;
                    prepareActionBar(toolbar);
                    searchToolbar.setVisibility(View.GONE);
                    supportInvalidateOptionsMenu();
                }
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

activity_with_double_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material">
        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@android:color/holo_red_dark"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

        </android.support.v7.widget.Toolbar>
        <android.support.v7.widget.Toolbar
                android:visibility="gone"
                android:background="@android:color/darker_gray"
                android:gravity="center_vertical"
                android:id="@+id/toolbar_search"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </android.support.v7.widget.Toolbar>
    </FrameLayout>

</LinearLayout>

search_for_second_toolbar.xml

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

search_item_only.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_search"
          android:title="search"
          android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
          app:showAsAction="ifRoom" ></item>
</menu>

Additionally you can look on this library

https://github.com/Quinny898/PersistentSearch

It can be interesting for you.