CODEWITHSUNDEEP
androidnavigation-drawer
Akeshwar Jha
Akeshwar Jha

Reputation: 4576

Changing colors of Navigation Drawer menu items

This is how my current navigation drawer looks like:

enter image description here

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?

Upvotes: 6

Views: 7066

Answers (4)

Jithish P N
Jithish P N

Reputation: 2160

 <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" />

Upvotes: 0

user5968678
user5968678

Reputation: 2094

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>

Upvotes: 20

Evans Mauta II
Evans Mauta II

Reputation: 208

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);
}

Upvotes: 2

Sreehari
Sreehari

Reputation: 5655

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" />

Upvotes: 1

Related Questions