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>

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

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

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

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

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

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

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>

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>

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>

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

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


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"

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


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

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.


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>

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

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.