Change the text color of a menu item in the navigation box

Question

I'm trying to add a night theme for my application, and I spent almost three hours trying to make the text and icons in my navigation box white with a dark background. This is how I try to do 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 value of nightMode does not matter because it works. When night mode is on (0), any menu item selected in the navigation box turns white. However, this only happens when each item is selected, which is clearly 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 use white icons on a transparent background for each item, but they appear as black on the black background of the navigation drawer. I tried looking for an xml solution to change the color of the text, and I scratch my head because I don’t know why this was missed.

Can someone suggest me a dynamic solution to get what I'm trying to achieve? Thanks everyone, thanks!

EDIT: I do not use a third-party library, this is 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 1

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 where I got this answer. And then right after assigning my NavigationView:

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

Answer 2

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

Answer 3

Use the app: itemIconTint in your navigation screen, 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" /> 

Answer 4

Extra options:

you can also change the name of the group 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"/> 

Answer 5

add an application: itemTextColor = "# fff" in your navigation view, for example

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

Answer 6

I used the code below to change the color of the text of the navigation cursor in my application.

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setItemTextColor(ColorStateList.valueOf(Color.WHITE)); 

Answer 7

This works for me. instead of customTheme you can put your theme in styles. in this code you can also change the font and size of the text.

  <style name="MyTheme.NavMenu" parent="CustomTheme"> <item name="android:textSize">16sp</item> <item name="android:fontFamily">@font/ssp_semi_bold</item> <item name="android:textColorPrimary">@color/yourcolor</item> </style> 

here is my navigational view

 <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:theme="@style/MyTheme.NavMenu" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer"> <include layout="@layout/layout_update_available"/> </android.support.design.widget.NavigationView> 

Answer 8

try this in java class

 yourNavigationView.setItemTextColor(new ColorStateList( new int [] [] { new int [] {android.R.attr.state_pressed}, new int [] {android.R.attr.state_focused}, new int [] {} }, new int [] { Color.rgb (255, 128, 192), Color.rgb (100, 200, 192), Color.WHITE } )); 

Answer 9

In the future, if anyone comes here, Activity of the navigation box (provided by Studio in the activity help window)

Answer:

Use this before OnCreate () in MainActivity

 int[][] state = new int[][] { new int[] {android.R.attr.state_checked}, // checked new int[] {-android.R.attr.state_checked} }; int[] color = new int[] { Color.rgb(255,46,84), (Color.BLACK) }; ColorStateList csl = new ColorStateList(state, color); int[][] state2 = new int[][] { new int[] {android.R.attr.state_checked}, // checked new int[] {-android.R.attr.state_checked} }; int[] color2 = new int[] { Color.rgb(255,46,84), (Color.GRAY) }; ColorStateList csl2 = new ColorStateList(state2, color2); 

and use this in onNavigationItemSelected () in MainActivity (you do not need to write this function, if you use the activity of the navigation box, it will be added to MainActivity).

  NavigationView nav = (NavigationView) findViewById(R.id.nav_view); nav.setItemTextColor(csl); nav.setItemIconTintList(csl2); nav.setItemBackgroundResource(R.color.white); 

Tip - add this code earlier if the else Condition is in onNavigationItemSelected ()

Answer 10

You can do this by simply adding your theme to the navigation view.

  <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:background="@color/colorPrimary" android:theme="@style/AppTheme.NavigationView" app:headerLayout="@layout/nav_header_drawer" app:menu="@menu/activity_drawer_drawer"/> 

and in your style.xml file you add this theme

  <style name="AppTheme.NavigationView" > <item name="colorPrimary">@color/text_color_changed_onClick</item> <item name="android:textColorPrimary">@color/Your_default_text_color</item> </style> 

Answer 11

This can help. It worked for me.

Go to Activity_ "Navigation Activity Name" .xml Inside NavigationView, paste this code

 app:itemTextColor="color of your choice" 

Answer 12

You can also define a custom theme derived from a base theme:

 <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:id="@+id/nav_view" app:headerLayout="@layout/nav_view_header" app:menu="@layout/nav_view_menu" app:theme="@style/MyTheme.NavMenu" /> 

and then in styles.xml:

  <style name="MyTheme.NavMenu" parent="MyTheme.Base"> <item name="android:textColorPrimary">@color/yourcolor</item> </style> 

You can also apply additional attributes to a custom theme.

Answer 13

  <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:itemBackground="@drawable/drawer_item_bg" app:headerLayout="@layout/nav_header_home" app:menu="@menu/app_home_drawer" /> 

To install Item Background using the app: itemBackground

drawer_item_bg.xml

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle" > <solid android:color="@android:color/transparent" /> </shape> </item> <item android:top="-2dp" android:right="-2dp" android:left="-2dp"> <shape> <padding android:bottom="0dp" android:left="15dp" android:right="0dp" android:top="0dp"/> <solid android:color="@android:color/transparent" /> <stroke android:width="0.5dp" android:color="#CACACA" /> </shape> </item> </layer-list> 

Answer 14

itemIconTint if you want to change the color of the icon

 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:itemTextColor="@color/colorPrimary" app:itemIconTint="@color/colorPrimary" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> 

Answer 15

You can use drawables in

app: itemTextColor app: itemIconTint

then you can control the checked state and normal state using drawing

 <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:itemHorizontalPadding="@dimen/margin_30" app:itemIconTint="@drawable/drawer_item_color" app:itemTextColor="@drawable/drawer_item_color" android:theme="@style/NavigationView" app:headerLayout="@layout/nav_header" app:menu="@menu/drawer_menu"> 

drawer_item_color.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/selectedColor" android:state_checked="true" /> <item android:color="@color/normalColor" /> </selector> 

Answer 16

To change the text color of an individual element, use the SpannableString line, as shown below:

 SpannableString spannableString = new SpannableString("Menu item")); spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary)), 0, spannableString.length(), 0); menu.findItem(R.id.nav_item).setTitle(spannableString);