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.

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 — Vinodh, Dec 07 '16 at 06:51
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. — Satan Pandeya, Dec 07 '16 at 06:59
You can get help from: http://stackoverflow.com/questions/40960334/action-bar-with-back-arrow/40960576#40960576 — Satan Pandeya, Dec 07 '16 at 07:00
Change the drawable icon resource file property: `android:fillColor="your custom color"`. — Satan Pandeya, Dec 07 '16 at 07:03
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. — Lawrence Teo, Dec 07 '16 at 07:25
@LawrenceTeo what you mean "on why"? You simply access icon directly from code and apply your own icon. — Vygintas B, Dec 07 '16 at 07:51
@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? — Lawrence Teo, Dec 08 '16 at 02:28
Thanks all, I found the answer to my own question. Please refer to the answer below. — Lawrence Teo, Dec 13 '16 at 07:20

score 6 · Accepted Answer · edited May 23 '17 at 12:13

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)

score 0 · Answer 2 · edited Dec 07 '16 at 07:07

0

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.

edited Dec 07 '16 at 07:07

Satan Pandeya

3,747
4
27
53

answered Dec 07 '16 at 06:51

Akshay Panchal

695
5
15

Vygintas B · Answer 3 · 2016-12-07T07:52:55.057

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

score 0 · Answer 4 · answered Apr 29 '19 at 08:47

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

How to set the color of icon in Android toolbar?

4 Answers4

Linked