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.

Robbynrobe

since that is an icon resource. you cannot change the color of the existing one. you need to add new icon to your resources of the desired color – Hilleary

Use Custom one: You can find Drawable Icon Resource in File/New/Vector Asset/Icon. Click on Icon and select the required one and use it to the ToolBar. You can customize the color of Icon too. – Carvelbuilt

You can get help from: https://mcmap.net/q/88557/-action-bar-with-back-arrow/… – Carvelbuilt

Change the drawable icon resource file property: android:fillColor="your custom color". – Carvelbuilt

I did change another custom icon with pure white. My observation indicates that Android will still change the icon color to gray. I believe it is related to Theme, Material Design & Tinting. – Robbynrobe

@LawrenceTeo did you check my answer? – Budge

@VygintasB, not yet, but can you explain more on why? – Robbynrobe

@LawrenceTeo what you mean "on why"? You simply access icon directly from code and apply your own icon. – Budge

@VygintasB, I tried already. Your suggestion doesn't help. Android will tint a pure white icon with gray tone in the Toolbar for some purpose, I guess which might be related to the Material Design guideline? – Robbynrobe

Thanks all, I found the answer to my own question. Please refer to the answer below. – Robbynrobe

Answer 1

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)

Robbynrobe

Answer 2

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.

Rolan

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;
}

Budge

Answer 4

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" />

Marlo