Changing background of search bar in toolbar to be white?

Question

I implemented a search bar in my toolbar and it currently looks like this:

But I want to change the background to white with a shadow so that it looks more like this (taken from Material Design guidelines):

How can I do this?

Here is my implementation of the SearchView:

menu_main.xml:

<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/ic_search_white_24dp"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="collapseActionView|ifRoom" />

</menu>

MainActivity.java:

public abstract class MainActivity extends AppCompatActivity {

    protected Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(final Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);

        final MenuItem searchItem = menu.findItem(R.id.action_search);

        SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView = (SearchView) searchItem.getActionView();
        searchView.setSearchableInfo(searchManager.getSearchableInfo(new ComponentName(this, SearchActivity.class)));
        searchView.setQueryHint("Search");

        MenuItemCompat.setOnActionExpandListener(searchItem, new MenuItemCompat.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                setMenuItemVisibility(menu, searchItem, false);
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                supportInvalidateOptionsMenu();
                return true;
            }
        });

        return true;
    }

    private void setMenuItemVisibility(Menu menu, MenuItem searchItem, boolean isVisible) {
        for (int i = 0; i < menu.size(); i++) {
            MenuItem item = menu.getItem(i);
            Log.d(TAG, item.toString());
            if (item != searchItem) {
                item.setVisible(isVisible);
            }
        }
    }
}

How can I style the SearchView to change the background color?

The one in screenshot is, according to me, a `CardView` inside Toolbar. You can either do that or use some searchview library from github — Sourabh, Mar 28 '17 at 23:14
Are you sure it's a CardView? It looks more like an EditText with a custom drawable. In any case, how would I implement that (preferably without a library)? — user7782745, Mar 28 '17 at 23:16
Put that inside Toolbar inside your xml, Toolbar is a viewgroup? — Sourabh, Mar 28 '17 at 23:19
Do you mean put an EditText in my Toolbar and use that as the SearchView? — user7782745, Mar 29 '17 at 06:56
Yes, put edittext or cardview in toolbar (I'd put cardview because I can then easily expand it and put more stuff inside it when make search — Sourabh, Mar 29 '17 at 09:24

Changing background of search bar in toolbar to be white?

0 Answers0