guillaume-tgl
guillaume-tgl

Reputation: 2856

Tint menu icons

I'm building an Android app and I use the icons from the Action Bar Icon Pack to use in the action bar. I define them through the xml files in the menu folder. Is there a way to "tint" these icons so that they are all the same color? So far, I have to do it manually with an image editing software but if I decide to change the color, I have to do it all over again.

I know there is a android:tint attribute for ImageView but I haven't found a way to use it for the menu's icons.

Thanks

Upvotes: 19

Views: 20948

Answers (4)

To improve you can create a static method in a utils class and use that method everytimes you want.

-------- DEFINE YOUR METHOD-----------------------------------

public static void tintMenuIcon(Context context, MenuItem item, @ColorRes int color) {  
    Drawable normalDrawable = item.getIcon();
    Drawable wrapDrawable = DrawableCompat.wrap(normalDrawable);
    DrawableCompat.setTint(wrapDrawable, context.getResources().getColor(color));

    item.setIcon(wrapDrawable);
}

--------------------- HOW USE IT -------------------------------

Override
public boolean onCreateOptionsMenu(Menu menu) {  
    getMenuInflater().inflate(R.menu.menu_main, menu);
    MenuItem menuItem = menu.findItem(R.id.action_delete);

    if (menuItem != null) {
        tintMenuIcon(MainActivity.this, menuItem, android.R.color.holo_purple);//HERE
    }

    return true;
}

My source was : https://futurestud.io/tutorials/android-quick-tips-8-how-to-dynamically-tint-actionbar-menu-icons

Upvotes: 1

ernazm
ernazm

Reputation: 9258

Now you can use tinting from DrawableCompat rather than color filter:

MenuItem favoriteItem = menu.findItem(R.id.action_favorite);
Drawable favoriteIcon = DrawableCompat.wrap(favoriteItem.getIcon());
ColorStateList colorSelector = ResourcesCompat.getColorStateList(getResources(), R.color.tinted_selector, getTheme());
DrawableCompat.setTintList(favoriteIcon, colorSelector);
favoriteItem.setIcon(favoriteIcon);

Upvotes: 7

adray
adray

Reputation: 1448

If original source of icon is raster image then it's possible to wrap it by <bitmap>.

Add this file into drawable folder - settings_icon.xml:

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_action_settings"
    android:tint="@color/colorRed"/>

and then use this drawable for menu item:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/new_game"
    android:icon="@drawable/settings_icon"
    android:title="@string/settings"
    app:showAsAction="always"/>
</menu>

Upvotes: 16

jimejim
jimejim

Reputation: 594

There may be a better way to do this, but one option is to redraw the icon in code.

Suppose you have a menu item for favorites and want to tint it gray:

MenuItem favoriteItem = menu.findItem(R.id.action_favorite);
Drawable newIcon = (Drawable)favoriteItem.getIcon();
newIcon.mutate().setColorFilter(Color.argb(255, 200, 200, 200), PorterDuff.Mode.SRC_IN);
favoriteItem.setIcon(newIcon);

You can also use a color resource like

newIcon.mutate().setColorFilter(getResources().getColor(R.color.myCustomTint), PorterDuff.Mode.SRC_IN);

Upvotes: 44

Related Questions