Cambiar el color del texto del elemento del menú en el cajón de navegación

89

Estoy tratando de agregar un tema nocturno para mi aplicación y he perdido casi tres horas tratando de hacer que el texto y los íconos en mi cajón de navegación se vuelvan blancos junto con el fondo oscuro. Esta es la forma en que estoy tratando de hacer esto onCreate()en 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);
        }

El nightModebooleano es irrelevante porque funciona. Cuando el modo nocturno está activado (0), cualquier elemento de menú seleccionado en el panel de navegación se vuelve blanco. Sin embargo, eso solo sucede cuando se selecciona cada elemento, lo que obviamente es un inconveniente. Aquí está mi 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>

Estoy usando iconos blancos sobre un fondo transparente para cada elemento, pero aparecen en negro sobre el fondo negro del cajón de navegación. Intenté buscar una solución xml para cambiar el color del texto y me estoy rascando la cabeza porque no sé por qué se pasó por alto.

¿Alguien puede ofrecerme una solución dinámica para lograr lo que estoy tratando de lograr? Se agradece toda la ayuda, ¡gracias!

EDITAR: No estoy usando una biblioteca de terceros, es el NavigationView proporcionado en la biblioteca de soporte. Aquí está el diseño XML:

<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>
android xml menu wasimsandhu
fuente
¿por qué no acaba de cambiar el tema Actividad de Lighta Darky viceversa ..
Emil
@Boss con la forma en que está programada mi aplicación, sería un proceso tedioso. Tengo este tema día / noche funcionando perfectamente en cualquier otro lugar menos en mi cajón de navegación, así que todo lo que necesito es una solución para eso.
wasimsandhu

Respuestas:

244 
 <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" />
Neha Tyagi
fuente
29
Esto establecerá el color de cada elemento del cajón de navegación en "su color". ¿Hay alguna forma de cambiar el color individualmente para cada grupo del cajón?
Akeshwar Jha
2
@Akeshwar, puedes intentar hacerlo programáticamente, sin embargo, no lo recomendaría ya que va en contra de las pautas de Material.
Abdellah Benhammou
sí, ¡también hay una manera de cambiar los colores individualmente!
2
@NehaTyagi Cómo cambiar el estilo de fuente en los elementos del menú desde xml.
Chetan Joshi
@Hara Hara Mahadevaki ¿Puedes decirme eso?
anju jo
44

Utilice la aplicación: itemIconTint en su 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" />
icortesi
fuente
3
y ¿qué pasa con el color del texto del elemento seleccionado?
Usman Rana
28

NavigationViewtiene un método llamado setItemTextColor(). Utiliza un 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);

Aquí es donde obtuve esa respuesta. Y luego, justo después de asignar mi NavigationView:

if (nightMode == 0) {
            navigationView.setItemTextColor(csl);
            navigationView.setItemIconTintList(csl2);
        }
wasimsandhu
fuente
Hola, ¿hay alguna forma de cambiar el color de cada grupo del cajón de navegación individualmente?
Akeshwar Jha
todavía es de color gris
¿Cómo cambiar el color del texto del grupo?
Ari
15

Mas opciones:

también puede cambiar el título del grupo anulando "textColorSecondary"

En su styles.xml

<style name="AppTheme.NavigationView">
    <item name="android:textColorSecondary">#FFFFFF</item>
</style>

En tu diseño

<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"/>
Jaswanth Manigundan
fuente
Esta solución me ayudó a solucionar mi problema de color. ¡Gracias!
Mark Delphi
10

agregue la aplicación: itemTextColor = "# fff" en su NavigationView como

 <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"/>
Sai Gopi Me
fuente
6

Usé el siguiente código para cambiar el color del texto del cajón de navegación en mi aplicación.

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

Esto funciona para mi. en lugar de customTheme, puede poner su tema en estilos. en este código también puede cambiar la fuente y el tamaño del texto.

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

aquí está mi vista de navegación

<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>
Chandan Singh
fuente
4

Puede hacerlo simplemente agregando su tema a su Vista de navegación.

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

y en su archivo style.xml, agregará este tema 

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

Puedes usar elementos de diseño en

aplicación: itemTextColor aplicación: itemIconTint

entonces puede controlar el estado verificado y el estado normal usando un dibujable

<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>
Margen
fuente
3

prueba esto en la clase de Java

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
            }
    ));
DRM
fuente
3

En el futuro, si alguien viene aquí usando, Actividad del cajón de navegación (proporcionada por Studio en la ventana de solicitud de actividad)

La respuesta es -

Use esto antes de OnCreate () en 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);

y use esto en onNavigationItemSelected () en MainActivity (no necesita escribir esta función si usa la actividad Navigation Drawer, se agregará en MainActivity). 

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

Sugerencia: agregue este código antes de la condición If else en onNavigationItemSelected ()

Chirag Joshi
fuente
2

Esto puede ayudar, funcionó para mí

Vaya a activity_ "nombre de la actividad de navegación" .xml Dentro de NavigationView inserte este código

app:itemTextColor="color of your choice"
Dhyan V
fuente
1

También puede definir un tema personalizado derivado de su tema base:

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

y luego en su archivo styles.xml:

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

también puede aplicar más atributos al tema personalizado.

Vahid Amiri
fuente
1

Para cambiar el color del texto individual de un solo elemento, use un SpannableString como a continuación:

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);
Oush
fuente
1

En mi caso, necesitaba cambiar el color de un solo elemento del menú: "Cerrar sesión". Tuve que ejecutar una recursividad y cambiar el color del título:

NavigationView nvDrawer;
Menu menu = nvDrawer.getMenu();
    for (int i = 0; i < menu.size(); i ++){
        MenuItem menuItem = menu.getItem(i);

        if (menuItem.getTitle().equals("Logout")){

            SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
            spanString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.red)), 0, spanString.length(), 0);
            menuItem.setTitle(spanString);

        }

    }

Hice esto en el método onCreate de Activity.

Gordons
fuente
0 
 <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" />

Para configurar el fondo del elemento usando la aplicación: 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>
Mohd. Jafar Iqbal Khan
fuente
0

itemIconTint, si desea cambiar el color del icono 

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" />
Sras
fuente
0

para cambiar el color del texto del panel de navegación

usamos app:itemTextColor="@color/white"

para cambiar el color del cajón de navegación

utilizar app:itemIconTint="@color/black"


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/naView"
        app:itemIconTint="@color/black"
        android:layout_width="match_parent"
        app:menu="@menu/navmenu"
        app:itemTextColor="@color/white"
        app:headerLayout="@layout/nav_header"
        android:layout_height="match_parent"
        app:itemTextAppearance="?android:textAppearanceMedium"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        />
RvSingh3213
fuente