Navigation Drawer Menu Item Title Color in Android

Question

I have a problem changing the Menu Item Title Color in the Navigation Drawer I set the itemTextColor but it only changes the Color of the Items not the Title of the menu.

Here is my Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:itemTextColor="#ffffff"
        android:background="#283135"
        />


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

activity_main_drawer.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/nav_home"
            android:icon="@mipmap/hospital"
            android:title="Home"
            />
<item
            android:id="@+id/nav_reminder"
            android:icon="@mipmap/alarm"
            android:title="Reminders" />

    </group>

    <item android:title="Tools">
        <menu>
            <item
                android:id="@+id/nav_settings"
                android:icon="@mipmap/settings"
                android:title="Settings" />
            <item
                android:id="@+id/nav_help"
                android:icon="@mipmap/information"
                android:title="Help" />
            <item
                android:id="@+id/nav_about"
                android:icon="@mipmap/team"
                android:title="About Us" />
        </menu>
    </item>

</menu>

Check this:

Answer 1

To give Menu item title color and textSize Create this way..

add this to your styles.xml file.

 <style name="TextAppearance44">
        <item name="android:textColor">#FF0000</item>
        <item name="android:textSize">20sp</item>
 </style>

now in activity_main_drawer.xml file give id attribute to title ..

<item android:title="Tools"
       android:id="@+id/tools">
        <menu>
            <item
                android:id="@+id/nav_settings"
                android:icon="@mipmap/settings"
                android:title="Settings" />
            <item
                android:id="@+id/nav_help"
                android:icon="@mipmap/information"
                android:title="Help" />
            <item
                android:id="@+id/nav_about"
                android:icon="@mipmap/team"
                android:title="About Us" />
        </menu>
    </item>

now In MainActivity.java file use this way..

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

        Menu menu = navigationView.getMenu();

        MenuItem tools= menu.findItem(R.id.tools);
        SpannableString s = new SpannableString(tools.getTitle());
        s.setSpan(new TextAppearanceSpan(this, R.style.TextAppearance44), 0, s.length(), 0);
        tools.setTitle(s);
        navigationView.setNavigationItemSelectedListener(this);

It will change your tools color to Red and TextSize to 20sp .. Implement it..

In my case Output :

Answer 2

You can also define new style in styles.xml:

<style name="NavigationView">
    <item name="android:textColorSecondary">@color/white</item>
</style>

and then applying this style in NavigationView's theme:

<android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:theme="@style/NavigationView" />

Answer 3

Just add app:itemTextColor="@color/accent property in your Navigation view tag like below.

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:backgroundTint="@color/primary"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"
    app:itemTextColor="@color/accent"/>

Answer 4

For anyone who may stumble upon this question and find no working answer like me, add <item name="android:textColorSecondary">@color/white</item> inside your AppTheme and AppTheme.NoActionBar styles.xml file like this:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:textColorSecondary">@color/white</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="android:textColorSecondary">@color/white</item>
    </style>
...
</resources>

This should produce something like this:

Note: I've made the item text "Share" or "Send" white by adding app:itemTextColor="@color/white" inside the NavigationView . The Full NavigationView code:

<com.google.android.material.navigation.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/white"
            android:background="#283135"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer"/>

Answer 5

With the NavigationView included in the Material Components Library you can use the app:itemTextColor to define a color or a selector for each items and the app:itemTextAppearance if you want to customize the TextAppearance used.

 <com.google.android.material.navigation.NavigationView    
      app:itemTextColor="@color/colorPrimaryDark"
      app:itemTextAppearance="@style/...."
      ...>

For the color you can use a selector like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:color="?attr/colorOnSurface"/>
</selector>

To change the color of a title group you can override the android:textColorSecondary color with:

<com.google.android.material.navigation.NavigationView
    android:theme="@style/ThemeOverlay.titleColor"
    ..>

with:

  <style name="ThemeOverlay.titleColor" parent="">
    <item name="android:textColorSecondary">@color/....</item>
  </style>

Answer 6

<style name="AppTheme.NavigationView">
    <item name="android:textColorSecondary">@color/colorPrimaryDark</item>
    <item name="android:textSize">20sp</item>
</style>

Set textSize if you want to change the title size too