How to set the color of icon in Android toolbar?

Question

I forked a GitHub project from https://github.com/nglauber/playground/tree/master/android/DemoSearch

I would like to set the color of the search icon to be pure white. At the moment, the search icon is gray in color, and is obviously different from the white text of "Demo Search".

Edit:

Based on some suggestions, I created a new icon using pure white (to be exact, RGB=255,255,255), and use it in place of the android:ic_menu_search. Android will tint it with a gray tone (verified with color picker tool on the screenshot), even though the original icon is in pure white.

This suggests to me that Android is tinting the icon on purpose. And I hope there is some way I can have the control to set or change the icon color in the Android Toolbar.

Answer 1

You just need to change to using SearchView class from support library

<item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_white_24dp"
        android:orderInCategory="2"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />

Answer 2

I found the answer to my own question. I decided to document it so it will be able to help other Android developers.

The short answer is yes, we can maintain the icon color in the Android Toolbar, and we need to do it by importing the resource through

• SVG, or
• PNG with icon type as Launcher Icons

---

The original problem that I encountered was due to

• PNG with icon type as Action Bar and Tab Icons

In this setting, Android Studio Image Asset will change the icon color a little for some unknown reason when it saves to the res project folder. And Android will further change the icon color when it is finally displayed on the screen. The end result was what I described in the question, where the originally pure white icon will turn and become gray in color.

If we use SVG or PNG with icon type as Launcher Icons, there will be NO color change to the icon. The icon will be able to retain its original color. This makes me believe it is a bug in Android Studio rather than a design guideline assistance.

---

Similar observation is reported in this Stack Overflow post. @markj reported "the resulting images are just useless gray shapes".

---

The resulting Android environment screenshots

Color maintained

(SVG) (PNG as Launcher Icons)

Color changed

(PNG as Action Bar and Tab Icons)

Answer 3

You have to use menu. Add searchView as an item in menu

<?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/menu_search"
    android:title="Search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="ifRoom"
    android:orderInCategory="1"
    android:menuCategory="secondary"
    android:visible="true"

    />

</menu>

And in your activity Override this method

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    menuItem = menu.findItem(R.id.menu_search);
    searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
    searchView.setIconifiedByDefault(true);

    //get search icon View and set your drawable
    ImageView icon = (ImageView)searchView.findViewById(R.id.search_button);
    icon.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.ic_search_white_24dp));




    return true;
}

Answer 4

You have to make white icon and add it in menu_search.xmlin res/menu` file.

Currently its android:icon="@android:drawable/ic_menu_search". But you can use your own icon here. You can then write it as android:icon="@drawable/ic_menu_search" in res/menu file.