Changing text color of menu item in navigation drawer
Solution 1
<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:itemTextColor="your color"
app:menu="@menu/drawer" />
Solution 2
Use app:itemIconTint in your NavigationView, ej:
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextColor="@color/customColor"
app:itemIconTint="@color/customColor"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_home"
app:menu="@menu/activity_home_drawer" />
Solution 3
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);
}
Solution 4
More options:
you can also change the group title by overriding "textColorSecondary"
In your styles.xml
<style name="AppTheme.NavigationView">
<item name="android:textColorSecondary">#FFFFFF</item>
</style>
In your layout
<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:menu="@menu/activity_main_menu_drawer_drawer"
android:theme="@style/AppTheme.NavigationView"
app:itemIconTint="@color/colorPrimary"
app:itemTextColor="@color/white"/>
Solution 5
add app:itemTextColor="#fff" in your NavigationView like
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="@menu/slider_menu"
android:background="@color/colorAccent"
app:itemTextColor="#fff"
android:id="@+id/navigation_view"
android:layout_gravity="start"/>
wasimsandhu
Updated on July 08, 2022Comments
-
wasimsandhu almost 2 years
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()
inMainActivity.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>
-
Akeshwar Jha about 8 yearsThis will set the color of every item of the navigation drawer to "your color". Is there a way to change color individually for every each group of the drawer?
-
Akeshwar Jha about 8 yearsHi, is there a way to change the color of every group of the navigation drawer individually?
-
Abdellah Benhammou over 7 years@Akeshwar, you can try doing that programatically, however, I wouldn't recommend that since it goes against the Material guidelines.
-
Admin over 7 yearsstill its grey in color
-
Admin over 7 yearsyes there is a way to change the colors individually too!
-
Ari about 7 yearsHow to change the group text color?
-
Chetan Joshi about 7 years@NehaTyagi How to change font style in menu items from xml.
-
Usman Rana over 6 yearsand what bout selected item text color?
-
anju jo almost 6 years@Hara Hara Mahadevaki Can you please tell me that?
-
Dmitriy Greh over 5 years@anjujo, yes. Just remove this line - "app:itemTextColor". it's never to late :)
-
Mark Delphi over 4 yearsThis solution helped me to fix my the color problem. Thank you!
-
Ahmed Awadallah over 3 yearsWhy not just find the item by ID?
-
Oush over 3 years@AhmedAwadallah you're right no need to loop through all the items
-
SebasSBM almost 2 yearsI landed in this answer for different reasons: I did exactly this before (
itemTextColor
). Now I refactored and moved this into an style, but it's not working! (the text is black again, like there was no setting at all!). Other attributes worked for the<style>
(like the background color) butitemTextColor
did not!... I don't get it... It's like nothing likeapp:*
works in <style> tags or what?