Change Toolbar Un-hidden Menu Icon Color

Question

How to change toolbar search icon color? I want it to be white colored. I've change with my own white drawable but the result still black. I've read this post but the post problem is text color not icon color.

ScreenShot

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.zihadrizkyef.project_katalog_grosirmukenalukis_admin.MainActivity"

    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/myToolbar"
        android:layout_height="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:theme="@style/myToolbarTheme"/>

    <ListView
        android:id="@+id/lvProduct"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

style.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:buttonStyle">@style/MyButtonStyle</item>
    </style>

    <style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
        <item name="android:textAllCaps">false</item>
        <item name="android:background">@drawable/mybutton</item>
        <item name="android:textColor">@color/myWidgetContentColor</item>
    </style>

    <style name="myToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColorPrimary">@color/myWidgetContentColor</item>
    </style>
</resources>

menu_home.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="always"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:title="Search"
        android:icon="@drawable/ic_action_search"/>
</menu>

@himanshu1496 Sorry about that, i am forget to put menu xml in the post — zihadrizkyef, Oct 20 '16 at 09:10

score 2 · Answer 1 · answered Oct 20 '16 at 13:42

2

I got the answer :

main_activity.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/myToolbar"
    android:layout_height="?android:attr/actionBarSize"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary"
    android:theme="@style/myToolbarTheme"/>

style.xml

<style name="myToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">#fff</item>
</style>

answered Oct 20 '16 at 13:42

zihadrizkyef

1,849
3
23
46

Still if you don't want to change the theme and change only searchView color then you can try my answer ;) – MashukKhan Apr 03 '17 at 07:22

score 1 · Answer 2 · answered Oct 20 '16 at 08:11

First you need to create your own menu, then place your own icon in menu item.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.bruce.example.search.SearchActivity">
<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="never" />
<item
    android:id="@+id/action_search"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    android:icon="@drawable/ic_search"
    app:showAsAction="always" />

Then just overwrite onCreateOptionsMenu to inflate your custom menu.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search, menu);
    return true;
}

Let me know if you have any problem with it

Thank you. But sorry i've did it, i am forget to tell it in the post. — zihadrizkyef, Oct 20 '16 at 09:09
I've use my own PNG icon with white colored, but the result is black — zihadrizkyef, Oct 20 '16 at 10:16

score 1 · Answer 3 · answered Oct 20 '16 at 10:24

put following code into your activity's onCreateOptionsMenu().

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_home, menu);
        MenuItem favoriteItem = menu.findItem(R.id.action_search);
        Drawable newIcon = (Drawable)favoriteItem.getIcon();
        newIcon.mutate().setColorFilter(Color.argb(255, 200, 200, 200), PorterDuff.Mode.SRC_IN);
        favoriteItem.setIcon(newIcon);
        return true;
    }

You can give your own color in {Color.argb(255, 200, 200, 200)}

score 0 · Answer 4 · answered Oct 20 '16 at 12:00

create a XML file, you may call it ic_action_search_white, using tint to change the icon color.

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_action_search"
    android:tint="@color/white"/>

Then in your menu item set android:icon="@drawable/ic_action_search_white", the drawable is the XML file just created. Or you can programmatically set the icon yourSearchMenuItem.setIcon(R.drawable.ic_action_search_white)

Let me know if it works

himanshu1496 · Answer 5 · 2016-10-20T19:09:16.590

0

Change your AppTheme to below:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

Making it dark actionBar will solve your problem of menu icon color.

Update: Added windowNoTitle set as true.

edited Oct 20 '16 at 19:09

answered Oct 20 '16 at 12:44

himanshu1496

1,921
19
34

I am using v7 toolbar, it gives me 'java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.' – zihadrizkyef Oct 20 '16 at 12:52
okay have you added `false` in your `AppTheme` style as mentioned in answer, and if the theme is for above Lollipop then add `false`. – himanshu1496 Oct 20 '16 at 13:04
Oh sorry. i didn't see the `false`. After i put it, i got error `java.lang.IllegalArgumentException: AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }` – zihadrizkyef Oct 20 '16 at 13:24
Please check my updated answer. Just now I found out that we need to use both `windowActionBar` and `windowNoTitle` together to make it work. – himanshu1496 Oct 20 '16 at 19:09

score 0 · Answer 6 · answered Apr 03 '17 at 07:18

Add following method where the searchView is declared.

public Drawable changeDrawableTint(Drawable drawable, int color){
    final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
    DrawableCompat.setTintList(wrappedDrawable, ColorStateList
            .valueOf(color));
    return wrappedDrawable;
}

Now these two lines you've already written

MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

Just add this line

// To change the color of searchView
searchItem.setIcon(changeDrawableTint(searchItem.getIcon(), Color.WHITE));

Change Toolbar Un-hidden Menu Icon Color

6 Answers6