Modification de la couleur du texte de l'élément de menu dans le tiroir de navigation

89

J'essaie d'ajouter un thème de nuit pour mon application et j'ai perdu près de trois heures à essayer de faire en sorte que le texte et les icônes de mon tiroir de navigation deviennent blancs avec l'arrière-plan sombre. Voici la façon dont j'essaie de faire cela onCreate()dans 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);
        }

Le nightModebooléen n'est pas pertinent car il fonctionne. Lorsque le mode nuit est activé (0), l'élément de menu sélectionné dans le panneau de navigation devient blanc. Cependant, cela ne se produit que lorsque chaque élément est sélectionné, ce qui est évidemment gênant. Voici mon tiroir_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>

J'utilise des icônes blanches sur un fond transparent pour chaque élément, mais elles apparaissent en noir sur le fond noir du tiroir de navigation. J'ai essayé de chercher une solution xml pour changer la couleur du texte et je me gratte la tête parce que je ne sais pas pourquoi cela a été négligé.

Quelqu'un peut-il m'offrir une solution dynamique pour obtenir ce que j'essaie de réaliser? Toute aide est appréciée, merci!

EDIT: Je n'utilise pas de bibliothèque tierce, c'est le NavigationView fourni dans la bibliothèque de support. Voici la mise en page 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
la source
pourquoi ne pas changer simplement le thème de l'activité de Lightà Darket vice versa ..
Emil
@Boss avec la façon dont mon application est programmée, ce serait un processus fastidieux. J'ai ce thème jour / nuit qui fonctionne parfaitement partout ailleurs sauf dans mon tiroir de navigation, donc tout ce dont j'ai besoin est une solution pour cela.
wasimsandhu

Réponses:

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
la source
29
Cela définira la couleur de chaque élément du tiroir de navigation sur "votre couleur". Existe-t-il un moyen de changer la couleur individuellement pour chaque groupe de tiroirs?
Akeshwar Jha
2
@Akeshwar, vous pouvez essayer de le faire par programme, cependant, je ne le recommanderais pas car cela va à l'encontre des directives matérielles.
Abdellah Benhammou
oui il existe un moyen de changer les couleurs individuellement aussi!
2
@NehaTyagi Comment changer le style de police dans les éléments de menu de xml.
Chetan Joshi
@Hara Hara Mahadevaki Pouvez-vous me dire ça?
anju jo
43

Utilisez app: itemIconTint dans votre 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
la source
3
et que dire de la couleur du texte de l'élément sélectionné?
Usman Rana
28

NavigationViewa une méthode appelée setItemTextColor(). Il utilise 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);

Voici où j'ai obtenu cette réponse. Et puis juste après avoir attribué mon NavigationView:

if (nightMode == 0) {
            navigationView.setItemTextColor(csl);
            navigationView.setItemIconTintList(csl2);
        }
Wasimsandhu
la source
Salut, existe-t-il un moyen de changer la couleur de chaque groupe du tiroir de navigation individuellement?
Akeshwar Jha
toujours sa couleur grise
Comment changer la couleur du texte du groupe?
Ari
15

Plus d'options:

vous pouvez également modifier le titre du groupe en remplaçant "textColorSecondary"

Dans votre styles.xml

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

Dans votre mise en page

<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
la source
Cette solution m'a aidé à résoudre mon problème de couleur. Merci!
Mark Delphi le
10

ajoutez app: itemTextColor = "# fff" dans votre NavigationView comme

 <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 moi
la source
6

J'ai utilisé le code ci-dessous pour changer la couleur du texte du tiroir de navigation dans mon application.

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setItemTextColor(ColorStateList.valueOf(Color.WHITE));
Dictionnaire SinToEn
la source
4

Cela fonctionne pour moi. à la place de customTheme, vous pouvez mettre votre thème dans des styles. dans ce code, vous pouvez également modifier la police et la taille du texte.

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

voici ma vue de navigation

<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
la source
4

Vous pouvez le faire simplement en ajoutant votre thème à votre vue de navigation.

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

et dans votre fichier style.xml, vous ajouterez ce thème 

   <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
la source
4

Vous pouvez utiliser des dessinables dans

app: itemTextColor app: itemIconTint

alors vous pouvez contrôler l'état vérifié et l'état normal en utilisant un dessinable

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

tiroir_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>
Marge
la source
3

essayez ceci dans la classe 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
la source
3

Dans Future si quelqu'un vient ici en utilisant, Activité du tiroir de navigation (fournie par Studio dans la fenêtre Invite d'activité)

La réponse est -

Utilisez ceci avant OnCreate () dans 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);

et utilisez-le dans onNavigationItemSelected () dans MainActivity (vous n'avez pas besoin d'écrire cette fonction si vous utilisez l'activité du tiroir de navigation, elle sera ajoutée dans MainActivity). 

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

Astuce - ajoutez ce code avant If else Condition dans onNavigationItemSelected ()

Chirag Joshi
la source
2

Cela peut aider Cela a fonctionné pour moi

Accédez à activity_ "nom de l'activité de navigation" .xml Dans NavigationView, insérez ce code

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

Vous pouvez également définir un thème personnalisé dérivé de votre thème de 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" />

puis dans votre fichier styles.xml:

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

vous pouvez également appliquer plus d'attributs au thème personnalisé.

Vahid Amiri
la source
1

Pour modifier la couleur de texte individuelle d'un seul élément, utilisez une chaîne SpannableString comme ci-dessous:

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
la source
1

Dans mon cas, j'avais besoin de changer la couleur d'un seul élément de menu - "Déconnexion". J'ai dû lancer une récursivité et changer la couleur du titre:

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

        }

    }

Je l'ai fait dans la méthode onCreate de Activity.

Gordons
la source
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" />

Pour définir l'arrière-plan de l'élément à l'aide de l'application: itemBackground

tiroir_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
la source
0

itemIconTint, si vous voulez changer la couleur de l'icône 

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
la source
0

pour changer la couleur du texte du tiroir de navigation

nous utilisons app:itemTextColor="@color/white"

pour changer la couleur du tiroir de navigation

utilisation 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
la source