CODEWITHSUNDEEP
android
zihadrizkyef
zihadrizkyef

Reputation: 1941

Change Toolbar Un-hidden Menu Icon Color

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

enter image description here

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>

Upvotes: 2

Views: 1905

Answers (6)

MashukKhan
MashukKhan

Reputation: 1954

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

Upvotes: 0

himanshu1496
himanshu1496

Reputation: 1921

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.

Upvotes: 0

zihadrizkyef
zihadrizkyef

Reputation: 1941

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>

Upvotes: 2

Chenmin
Chenmin

Reputation: 121

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

Upvotes: 0

Mayank Pandya
Mayank Pandya

Reputation: 265

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

Upvotes: 1

Bruce Nguyen
Bruce Nguyen

Reputation: 76

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

Upvotes: 1

Related Questions