How to set icon color of MenuItem?

Question

I defined a menu item that has ShareActionProvider and share white icon like so :

<item
    android:icon="@drawable/ic_share_white_24dp"
    android:id="@+id/action_share"
    android:title="@string/action_share"
    android:orderInCategory="200"
    app:showAsAction="ifRoom"
    app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>

But when I launch the application, I get a different black share icon. How to set the share icon to be white?

Here is the result that I have

app:iconTint="@color/yourcolor" – Ashraf Amin Mar 30 '22 at 03:08 — Ashraf Amin, Mar 30 '22 at 03:08

tachyonflux · Answer 1 · 2016-04-05T16:00:47.757

74

The icon is actually provided by the ShareActionProvider and you can't change it afaik. You can, however, customize the color by setting the textColorPrimary in your styles.xml:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/MyActionBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<style name="MyActionBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">#fa0</item>
</style>

For any custom icons, you would have to color them yourself, ie.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);

    for(int i = 0; i < menu.size(); i++){
        Drawable drawable = menu.getItem(i).getIcon();
        if(drawable != null) {
            drawable.mutate();
            drawable.setColorFilter(getResources().getColor(R.color.textColorPrimary), PorterDuff.Mode.SRC_ATOP);
        }
    }

    return true;
}

edited Apr 05 '16 at 16:00

answered Aug 11 '15 at 23:21

tachyonflux

20,103
7
48
67

@YoannHercouet Are you trying to change the color of some other icon and not a `ShareActionProvider` icon as this question is specifically asking for? Are you using a `Toolbar`? – tachyonflux Apr 04 '16 at 21:20
The question specifies MenuItems, but anyway I gave it a try with the ShareActionProvider. I realized this icon is set automatically so you don't need to set one, you only need to change the theme as BladeCoder explained, and it will be displayed in white automatically. I tried setting `textColorPrimary` as you said, it does not change anything, and even if it would, it would not only change the ActionBar or ToolBar but all the titles and many components in the app. – Yoann Hercouet Apr 05 '16 at 07:50
@YoannHercouet well, some things might have changed, but the ShareActionProvider and overflow menu are still affected by `textColorPrimary`, if the toolbar is styled for it. For any custom icons, you would have to color them yourself. – tachyonflux Apr 05 '16 at 15:58

score 67 · Answer 2 · edited Jun 20 '20 at 09:12

67

Short and Sweet Answer--> app:iconTint="@color/yourcolor

add app:iconTint="@color/yourcolor" in your MenuItem for change the Icon color.

<item
    android:icon="@drawable/ic_share_white_24dp"
    android:id="@+id/action_share"
    android:title="@string/action_share"
    android:orderInCategory="200"
    app:iconTint="@color/yourcolor"
    app:showAsAction="ifRoom"
    app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 21 '18 at 22:25

Nikunj Paradva

15,332
5
54
65

2

This is not a bad solution if you want to re-color it from menu-XML: the namespace then should be _android:_ instead of _app:_ `android:iconTint="@android:color/white"`. Important: Attribute iconTint is only used in API level 26 and higher! – Danny Aug 22 '18 at 15:35
32

@danny.schimke use `app:` insted of `android:` then it ll use in below 26 api – Nikunj Paradva Aug 22 '18 at 15:38
4

you're right, with app:iconTitle it even work below API 26 - thanks! Maybe people get confused because in my IDE it's not correctly shown in preview, but correct recolored at runtime! Your solution works very well and don't deserve a down-vote! – Danny Aug 22 '18 at 15:57
Note, I was using a system icon and even using `iconTint` as "#FFFFFF", it was still like a gray colour. I ended up creating a new Vector Asset to get a fully white icon properly. – Joshua Pinter Oct 11 '19 at 20:00
1

Thanks @NikunjParadva it work like i want thumbs up – Ashraf Amin Mar 30 '22 at 03:07

BladeCoder · Accepted Answer · 2015-09-03T00:09:27.897

48

This is a theming issue. Depending on your current theme, you need to set the correct ActionBar overlay theme. The Action Provider reads a value in the theme (which indicates if the theme is dark or light) to determine the color of the icon.

If your main theme is light and your ActionBar is dark, your ActionBar/Toolbar must use the theme ThemeOverlay.AppCompat.Dark.ActionBar.

edited Sep 03 '15 at 00:09

answered Aug 11 '15 at 23:40

BladeCoder

12,779
3
59
51

I am the theme `Theme.AppCompat.Light.NoActionBar`, how can I achieve that? – Dimitri Aug 12 '15 at 06:23
5

Indeed your main theme is light and you are using a Toolbar. You need to specify `android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"` as attribute on your `Toolbar` in your XML layout. If you want the toolbar popup menu to be light while the toolbar is dark, you also need to add `app:popupTheme="@style/ThemeOverlay.AppCompat.Light"`. – BladeCoder Aug 12 '15 at 10:45
If I set the theme `android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar`, is he going to change the color of my toolbar? – Dimitri Aug 12 '15 at 12:12
No, the color of the Toolbar is determined by the value of android:background. The theme allows to inflate the views inside the Toolbar with the correct default appearance. – BladeCoder Aug 12 '15 at 15:50
2

This will only change the overflow icon, not the menu items color – Yoann Hercouet Apr 04 '16 at 16:41
Yes, this has no impact on your own custom icons for menu items. It only changes the Action Providers appearance and the built-in icons of the Toolbar: up and overflow. The question was about an Action Provider. – BladeCoder Apr 13 '16 at 08:04
1

Hint: you can find many icons in black AND white colors here: https://github.com/google/material-design-icons – stefan.m Jul 25 '17 at 21:05

druci · Answer 4 · 2016-09-25T13:04:55.823

41

try this :

public boolean onCreateOptionsMenu(Menu menu) {

    getMenuInflater().inflate(R.menu.MENU, menu);

    // change color for icon 0 
    Drawable yourdrawable = menu.getItem(0).getIcon(); // change 0 with 1,2 ... 
    yourdrawable.mutate();
    yourdrawable.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_IN);
    return true;
}

edited Sep 25 '16 at 13:04

answered Sep 25 '16 at 12:59

druci

491
5
4

score 7 · Answer 5 · answered Sep 23 '20 at 05:58

color of icons in menu can change in Layout/activity_main.xml

set this line app:itemIconTint="@color/red_warning inside this tag com.google.android.material.navigation.NavigationView

    <?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
        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"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

    <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>


    <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer"
            app:itemIconTint="@color/red_warning"
    />


</androidx.drawerlayout.widget.DrawerLayout>

This is perfect it works!. app:itemTextColor="@color/white" app:subheaderColor="@color/white" — Rafiqullah Taibzada, Aug 15 '23 at 17:41

score 6 · Answer 6 · 2019-02-02T21:50:16.480

6

short Answer --> use app:iconTint="?android:textColorPrimary" if you want the icon color to be white, write: android:theme = "@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" else if you want black color, write: android:theme="@style/ThemeOverlay.MaterialComponents.Light" to your toolbar

edited Feb 02 '19 at 21:50

answered Feb 02 '19 at 20:48

Hi, welcome to StackOverflow. Since this question already has several popular answers including an accepted one, please edit your answer to describe the behaviour of this slightly different solution and why you feel it is of assistance. Thanks. – MandyShaw Feb 02 '19 at 21:18
– Ashwin H Aug 24 '22 at 05:19

score 3 · Answer 7 · answered Feb 19 '18 at 06:31

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
    menuInflater.inflate(R.menu.menu_confirm, menu);
    MenuItem action_done = menu.findItem(R.id.action_done);
    action_done.setIcon(R.drawable.ic_filter);
    Utils.menuIconColor(action_done, Color.WHITE);
    super.onCreateOptionsMenu(menu, menuInflater);
}

public static void menuIconColor(MenuItem menuItem, int color) {
    Drawable drawable = menuItem.getIcon();
    if (drawable != null) {
        drawable.mutate();
        drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
    }
}

score 2 · Answer 8 · answered Oct 19 '20 at 07:07

 app:iconTint="@color/colorWhite"

add this in Navigational view properties

Ex -

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/main_color"
        app:itemBackground="@drawable/divider_menu_items"
        app:itemTextColor="@color/colorWhite"
        app:itemIconTint="@color/colorWhite"
        app:menu="@menu/activity_main_drawer"/>

Adding this all menu item icons convert to color given by you.

score 0 · Answer 9 · answered Aug 11 '15 at 23:20

This behaviour is expected, as the ShareActionProvider is

responsible for creating views that enable data sharing and also to show a sub menu with sharing activities if the hosting item is placed on the overflow menu.

according to the documentation.

This means that you don't have control over the customization of the view when using it.

How to set icon color of MenuItem?

9 Answers9

Short and Sweet Answer--> app:iconTint="@color/yourcolor

color of icons in menu can change in Layout/activity_main.xml

Linked