wasimsandhu wasimsandhu - 6 months ago 541
Android Question

Changing text color of menu item in navigation drawer

I'm trying to add a night theme for my app and I've wasted nearly three hours just trying to make the text and icons in my navigation drawer turn white along with the dark background. Here is the way I'm trying to go about doing this in

onCreate()
in
MainActivity.java
:

navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

// This method will trigger onItemClick of navigation menu
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {

// Checking if the item is in checked state or not, if not make it in checked state
if (menuItem.isChecked())
menuItem.setChecked(false);
else menuItem.setChecked(true);

if (nightMode == 0) {
SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
spanString.setSpan(new ForegroundColorSpan(Color.WHITE), 0, spanString.length(), 0); // fix the color to white
menuItem.setTitle(spanString);
}


The
nightMode
boolean is irrelevant because it works. When night mode is set to on (0), whatever menu item is selected in the navigation drawer turns white. However, that only happens when each item is selected which is obviously inconvenient. Here is my drawer_dark.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/unitone"
android:checked="true"
android:icon="@drawable/one_white"
android:title="Classical Period" />
<item
android:id="@+id/unittwo"
android:checked="false"
android:icon="@drawable/two_white"
android:title="Postclassical Period" />
<item
android:id="@+id/unitthree"
android:checked="false"
android:icon="@drawable/three_white"
android:title="Early Modern Era" />
<item
android:id="@+id/unitfour"
android:checked="false"
android:icon="@drawable/four_white"
android:title="Dawn of Industrial Age" />
<item
android:id="@+id/unitfive"
android:checked="false"
android:icon="@drawable/five_white"
android:title="Modern Era" />
</group>
</menu>


I'm using white icons on a transparent background for each item, yet they show up as black on the black background of the navigation drawer. I've tried looking for an xml solution to changing the color of the text and I'm scratching my head because I don't know why this was overlooked.

Can someone offer me a dynamic solution in getting what I'm trying to achieve? All help is appreciated, thank you!

EDIT: I am not using a third party library, it's the NavigationView provided in the support library. Here's the XML layout:

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp"
tools:context=".MainActivity"
android:fitsSystemWindows="true" >

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/ColorDark" />

<include layout="@layout/toolbar" />

</FrameLayout>

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

</android.support.v4.widget.DrawerLayout>

Answer

NavigationView has a method called setItemTextColor(). It uses a ColorStateList.

// FOR NAVIGATION VIEW ITEM TEXT COLOR
int[][] state = new int[][] {
        new int[] {-android.R.attr.state_enabled}, // disabled
        new int[] {android.R.attr.state_enabled}, // enabled
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_pressed}  // pressed

};

int[] color = new int[] {
        Color.WHITE,
        Color.WHITE,
        Color.WHITE,
        Color.WHITE
};

ColorStateList csl = new ColorStateList(state, color);


// FOR NAVIGATION VIEW ITEM ICON COLOR
int[][] states = new int[][] {
        new int[] {-android.R.attr.state_enabled}, // disabled
        new int[] {android.R.attr.state_enabled}, // enabled
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_pressed}  // pressed

};

int[] colors = new int[] {
        Color.WHITE,
        Color.WHITE,
        Color.WHITE,
        Color.WHITE
};

ColorStateList csl2 = new ColorStateList(states, colors);

Here is where I got that answer. And then right after assigning my NavigationView:

if (nightMode == 0) {
            navigationView.setItemTextColor(csl);
            navigationView.setItemIconTintList(csl2);
        }