Changing colors of Navigation Drawer menu items

Question

This is how my current navigation drawer looks like:

I've divided it into 4 groups. All I'm trying is to give every group a different text-color. I'm trying the options SETTINGS, FEEDBACK and TERMS AND CONDITIONS to have a smaller font and a little off-black color. I searched, but couldn't find a way to customize the navigation drawer groups individually. Here's the code I wrote for the menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android">


<group
    android:id="@+id/menu"
    android:checkableBehavior="single">

    <item
        android:id="@+id/nav_targets"
        android:icon="@drawable/icon_target"
        android:title="Targets" />

    <item
        android:id="@+id/nav_testing"
        android:icon="@drawable/icon_testing"
        android:title="Testing" />

    <item
        android:id="@+id/nav_course_work"
        android:icon="@drawable/icon_course_work"
        android:title="Course Work" />

    <item
        android:id="@+id/nav_schedule"
        android:icon="@drawable/icon_schedule"
        android:title="Schedule" />

    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/icon_profile"
        android:title="Profile" />

</group>

<group
    android:id="@+id/settings">
    <item
        android:title="SETTINGS"
        android:id="@+id/settings_item"></item>
</group>

<group
    android:id="@+id/feedback">
    <item
        android:title="FEEDBACK"
        android:id="@+id/feedback_item"></item>
</group>


<group
    android:id="@+id/TnC">
    <item
        android:title="TERMS &#038; CONDITIONS"
        android:id="@+id/t_n_c_item"></item>
</group>

Is there a way to achieve it?

Check this answer will help you http://stackoverflow.com/a/32114570/2900893 — Shabbir Dhangot, Mar 03 '16 at 06:41
nope, already checked this one. It changes the color of every item in then menu. I'm trying to make the change only for a few items - not all. — Akeshwar Jha, Mar 03 '16 at 06:51
@user5038993 try this get title from strings.xml and in strings.xml define strings with diffrent colors. Hope it helps — Jagjit Singh, Mar 03 '16 at 06:52
@JagjitSingh, I tried using html to set the color (Refer to http://stackoverflow.com/a/24392640/5038993 answer), but I think that only works for TextViews. It didn't work for me. Returned the whole string with html tags. — Akeshwar Jha, Mar 03 '16 at 07:22
@JagjitSingh, my bad, I was setting color to the menu-item directly. Thanks for the response. Setting the color for the title and then setting title to the menu helped. — Akeshwar Jha, Mar 04 '16 at 05:51
@user5038993 its okay i help. if u have problem check my blog coderzpassion.com Hope u get some help from there. — Jagjit Singh, Mar 04 '16 at 06:15

user5968678 · Accepted Answer · 2017-07-15T10:32:03.883

There are 2 ways to customize the navigation drawer menu items individually.

First way:

MenuItem menuItem = navigationView.getMenu().findItem(R.id.menu_item);
SpannableString s = new SpannableString(menuItem.getTitle());
s.setSpan(new ForegroundColorSpan(TEXT_COLOR), 0, s.length(), 0);
s.setSpan(new AbsoluteSizeSpan(TEXT_SIZE_in_dip, true), 0, s.length(), 0);
menuItem.setTitle(s);

Second way:

MenuItem menuItem = navigationView.getMenu().findItem(R.id.menu_item);
SpannableString s = new SpannableString(menuItem.getTitle());
s.setSpan(new TextAppearanceSpan(this, R.style.TextAppearance), 0, s.length(), 0);
menuItem.setTitle(s);

res / values / styles.xml

<style name="TextAppearance">
    <item name="android:textColor">TEXT_COLOR</item>
    <item name="android:textSize">TEXT_SIZE_in_sp</item>
</style>

score 2 · Answer 2 · answered Apr 19 '16 at 14:56

You can use this if you want different colors for each selected MenuItem:

public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();
    selectItem(id, item);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

private void selectItem(int id, MenuItem item) {
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

    switch (id) {
        case R.id.nav_a:
            Fragment newFragment = new FragmentA();
            transaction.replace(R.id.content, newFragment);
            transaction.commit();

            /**
            *Methods to refresh menu (i.e. set all MenuItems to default TextColor) 
            *and to then set TextColor of currently selected MenuItem
            */
            refreshNavMenu();
            setNavMenuItemColor(item, getResources().getColor(R.color.<Your Color>));
            break;
        case R.id.nav_b:
            newFragment = new FragmentB();
            transaction.replace(R.id.content, newFragment);
            transaction.commit();
            refreshNavMenu();
            setNavMenuItemColor(item, Color.BLUE);
            break;
    }
}

private void refreshNavMenu() {
    for (int i = 0; i < navigationView.getMenu().size(); i++) {
        MenuItem item = navigationView.getMenu().getItem(i);
        SpannableString span = new SpannableString(item.getTitle());
        span.setSpan(new ForegroundColorSpan(Color.BLACK), 0, span.length(), 0);
        item.setTitle(span);
    }
}

private void setNavMenuItemColor(MenuItem item, int color) {
    SpannableString span = new SpannableString(item.getTitle());
    span.setSpan(new ForegroundColorSpan(color), 0, span.length(), 0);
    item.setTitle(span);
}

score 1 · Answer 3 · answered Mar 03 '16 at 07:09

This should work for changing all the menu item colors in navigation drawer.

app:itemTextColor="@android:color/holo_orange_light"

This will be defined in the parent activity xml file where your Navigation Drawer is defined. android.support.v4.widget.DrawerLayout; and android.support.design.widget.NavigationView; is used in this 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:fitsSystemWindows="true"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        app:headerLayout="@layout/nav_header_home"
        app:itemTextColor="@android:color/holo_orange_light"
        app:menu="@menu/activity_home_drawer" />

Thanks, but I'm trying to change the menu item colors individually. It's like different menu-items having different color. — Akeshwar Jha, Mar 03 '16 at 07:17

score 0 · Answer 4 · answered Jul 03 '18 at 06:31

 <android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/header"
    android:background="your color"
    app:itemTextColor="your color"
    app:itemIconTint="your color"
    app:menu="@menu/drawer" />

Changing colors of Navigation Drawer menu items

4 Answers4