Navigation drawer item icon not showing original colour

Question

I'm trying to show an icon next to an item within my menu for my navigation drawer, but for some reason the icon always appears in grey rather than the original colour (brown). Is there any way of preventing this from happening in order to show the icon's original colour?

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            setupDrawerContent(navigationView);
        }
    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                mDrawerLayout.closeDrawers();

                return true;
            }
        });
    }
}

drawer_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="Section">
        <menu>
            <item
                android:id="@+id/navigation_item_1"
                android:icon="@drawable/ic_browncircle"
                android:title="Sub item 1" />
        </menu>
    </item>
</menu>

Wrongdoing

What's in your ic_browncircle ? – Wist

@YeLinAung A brown circle just like the icon above next to 'Sub item 1' but in the colour brown, not grey. – Wrongdoing

Maybe you can try .setColorFilter(MY_BROWN_COLOR) to that view ? – Wist

Please see my answer below. – Wist

Answer 1

I found the answer here: https://mcmap.net/q/160708/-disable-icon-colorstatelist-in-navigationview

To avoid the link its pretty straightforward:

    mNavigationView.setItemIconTintList(null);

This disables all state based tinting, but you can also specify your own list too. It worked great for me!

Here is where you can get the details on creating a color state list, but its pretty simple too: http://developer.android.com/reference/android/content/res/ColorStateList.html

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:color="@color/primary" />
        <item android:state_checked="false" android:color="@android:color/white" />
    </selector>

Prissy

Yeah, I tested it on a Nexus 4 running API 17. I also tested on the Android M preview. ColorStateList has been around for a while and NavigationView is part of the support library so I don't see a reason why this wouldn't work all the way to ICS and possibly even further back. – Prissy

Any XML alternative for this? Tried app:itemIconTint="@null" but no success. – Nonchalance

Thanks, I was starting to get a headache with this issue – Conclusive

mNavigationView.setItemIconTintList(null); This is the answer I was looking for so long... – Heda

Where do you use the selector? – Internalize

thanks :) How would I go about having a tint set for all the icons but one. For one particular icon, i want the tint set to null (i.e.) one particular menu item icon appears in its full color in all states – Propitious

Heyy @Prissy is it possible to add image on right hand side of menu items – Zoubek

Answer 2

Use

    mNavigationView.setItemIconTintList(null);

it's right. Also If all your icons in one color scheme (i had all white) you can setup through xml file - app:itemIconTint="@android:color/white"

My case:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:clickable="true"
    app:headerLayout="@layout/nav_header_main"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/activity_main_drawer"
    android:background="@android:color/black"
    app:itemIconTint="@android:color/white"
    />

Dream

Do you know how to solve this other problem? – Wrongdoing

This one works well, mNavigationView.setItemIconTintList(null); removes the default iconTint from all the icons . Now if you have your icon in red color, it would appear red, no iconTint would be applied . – Jobbery

Answer 3

I've tried something similar in one of my app. And yes, it appears that the icon color doesn't change. But I've managed to do with another workaround. Here's my ic_browncircle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:tint="@color/brown"
    >
  <size
      android:height="3dp"
      android:width="3dp"
      />
  <solid android:color="@color/brown"/>
</shape>

Which I believe is something similar to you but it doesn't have any effect and doesn't change the color.

So what I did is this.

navigationView.getMenu()
    .findItem(R.id. navigation_item_1)
    .getIcon()
    .setColorFilter(Color.parseColor("#b69260"), PorterDuff.Mode.SRC_ATOP);

And it seems working. Here's the result.

Wist

What about for pre-Lollipop? – Wrongdoing

I've been trying several solution for pre-Lollipop. So far, no luck yet :( – Wist

Answer 4

If you create a project with navigation drawer which the Android Studio provided. In your Main Activity class, you can just simply add this line of code navigationView.setItemIconTintList(null); to your onCreate method. Like this;

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setNavigationItemSelectedListener(this);
 navigationView.setItemIconTintList(null); // <----- HERE
 setupDrawerContent(navigationView);

Dichroism

Answer 5

You can try using a tinted drawable, not sure if it works below 5.0.

Create a drawable and add the following code.

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

And then change your menu item drawable to the one you just created. If that doesn't work, then I'm not sure of any other solutions. You can try this library: https://github.com/mikepenz/MaterialDrawer I use it a lot in my projects.

Exstipulate

This method doesn't work on API 17 (4.2). The reason (at least in my experience), is that the navigation drawer automatically overlays a white icon with a black tint when you have your theme set to light. When I remove the light from my theme my icons return to white like I intended them to be. – Prissy

Answer 6

Just add one line in xml

app:itemIconTint="@color/white"

Shu

Or app:itemIconTint="@null" – Marva

Answer 7

Some how this code not working MainActivity.java

                NavigationView.setItemIconTintList(null); // not working

so you can use it.

MainActivity.java

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
   navigationView.setNavigationItemSelectedListener(this); 
   navigationView.setItemIconTintList(null); // <-- HERE add this code for icon color

Bebe

Answer 8

I found a solution.

1) Go to the Design tab
2) Click on navView
3) Search itemicontint in properties
4) Write null and press Enter

Whirly

Answer 9

Add this

 android:tint="@color/colorPrimary"

Jeff

Answer 10

 BottomNavigationView navigationbtn = findViewById(R.id.bottomNavigationView);

 BottomNavigationMenuView mbottomNavigationMenuView =
                (BottomNavigationMenuView) navigationbtn.getChildAt(0);

       View view3 = mbottomNavigationMenuView.getChildAt(2);

       BottomNavigationItemView itemView3 = (BottomNavigationItemView) view3;

        itemView3.setIconTintList(null);

Devland