Navigation drawer menu icon is not displayed correctly

Question

I want to input my customized icon into the menu in navigation drawer. However, when I run the application it only display a shadow of icon. How do I show the image correctly?

Here is the xml file for menu activity_main_drawer.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/recent_picture"
            android:icon="@mipmap/ic_recent"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>
</menu>

Here is the xml layout with the navigation view:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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" />

    <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:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

There is another drawables.xml files found in the values folder.

<resources xmlns:android="http://schemas.android.com/apk/res/android">
<item name="ic_recent_picture" type="drawable">@mipmap/ic_recent</item>
<item name="ic_menu_gallery" type="drawable">@drawable/ic_menu_gallery</item>
<item name="ic_menu_slideshow" type="drawable">@android:drawable/ic_menu_slideshow</item>
<item name="ic_menu_manage" type="drawable">@android:drawable/ic_menu_manage</item>
<item name="ic_menu_share" type="drawable">@android:drawable/ic_menu_share</item>
<item name="ic_menu_send" type="drawable">@android:drawable/ic_menu_send</item>

@cwfei, I have tried put the image into drawable folder but it returns the same error too.. — michelletbs, Jan 19 '16 at 02:08
Did you update the reference in your xml file to be `android:icon="@drawable/ic_recent"` when you moved the image to the drawable folder? — George Mulligan, Jan 19 '16 at 02:13
@GeorgeMulligan, yes I did. when I click on the @mipmap/ic_recent, it will direct me to the correct icon. — michelletbs, Jan 19 '16 at 02:17
Just to clarify we want to try changing it from `@mipmap/ic_recent` to `@drawable/ic_recent` like your other icons and then make sure the ic_recent icon is in your `drawable` folder. Is that what you did? — George Mulligan, Jan 19 '16 at 02:20
@GeorgeMulligan, Apologise, i should have clarified. I have tried both way, @mipmap/ic_recent and @drawable/ic_recent. The ic_recent icon was in drawable folder and also in mipmap folder. but somehow the icon is not displayed. is it because of navigationview only can include standard icon? — michelletbs, Jan 19 '16 at 02:25
That is what I was trying to figure out. According to [this post](http://stackoverflow.com/a/28065664/1435985) mipmaps should only be used for application icons. — George Mulligan, Jan 19 '16 at 02:28
@GeorgeMulligan, I actually created this navigation drawer from the template in android studio. It seems like only work for icon in the library only ...i not sure why — michelletbs, Jan 19 '16 at 02:30
What kind of an image is ic_recent (png)? Try replacing it with another image, maybe even a duplicate of one of the other ones shown in the drawer, just to see if that at least works. — George Mulligan, Jan 19 '16 at 02:32
@GeorgeMulligan, it is a small png file with color. I have tried replaced with other images but it still the same..I saw there is a drawable.xml file included . I have put the code block into the post.. — michelletbs, Jan 19 '16 at 02:49
@GeorgeMulligan, it is working now! by removing the tintmode from navigationview using this code navigationView.setItemIconTintList(null); — michelletbs, Jan 19 '16 at 03:16
Glad to hear it! I have to say I've never had to remove the tintmode on a png before. — George Mulligan, Jan 19 '16 at 03:19

score 36 · Answer 1 · edited Mar 07 '17 at 10:47

36

It works now by removing the tint effect from icon by setItemIconTintList(null). Put the line of code below under the navigationView.

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setItemIconTintList(null);
 navigationView.setNavigationItemSelectedListener(this);

edited Mar 07 '17 at 10:47

Bugs Happen

2,169
4
33
59

answered Jan 19 '16 at 03:13

michelletbs

809
2
9
19

2

Thanks Michelletbs, navigationView.setItemIconTintList(null); solved my problem. – Sally Mar 17 '16 at 13:21
Great solution, works very well. Seems to be backwards compatible, pre lollipop still works. Thanks! – TryTryAgain Mar 17 '16 at 18:48
Great! Another solution, but only for interchanging 2 colors is here: http://stackoverflow.com/questions/30967851/change-navigation-view-item-color-dynamicly-android. – CoolMind Aug 02 '16 at 18:26
Thanks @michelletbs – F0r3v3r-A-N00b Apr 25 '18 at 09:03
Thanks @michelletbs, this is working fine. – Gyan Swaroop Awasthi Mar 04 '21 at 06:36

score 0 · Answer 2 · answered Jan 19 '16 at 02:57

0

Did you try to change to another image to see if it is displaying?

<item name="ic_recent_picture" type="drawable">@mipmap/ic_recent</item>

Path @mipmap contains correct image?

answered Jan 19 '16 at 02:57

Weverton Peron

99
1
7

I have replaced with the image which has pre-generated from template, its working. android:icon="@drawable/ic_menu_gallery", but if i put my own customized image then its display the grey square. – michelletbs Jan 19 '16 at 03:01
Hi @Weverton Peron, it works now by enter this code to remove tint mode from icon. navigationView.setItemIconTintList(null); – michelletbs Jan 19 '16 at 03:17

score 0 · Answer 3 · answered Aug 21 '16 at 02:39

0

if you still haven't solved the problem by removing the tint, you might want to move your resource file to drawable (use Poject View) instead of drawable-anydpi like I did

answered Aug 21 '16 at 02:39

Fajar Ulin Nuha

399
2
7

Navigation drawer menu icon is not displayed correctly

3 Answers3

Linked