Ändern der Textfarbe des Menüelements in der Navigationsleiste


87

Ich versuche, ein Nachtthema für meine App hinzuzufügen, und ich habe fast drei Stunden damit verbracht, den Text und die Symbole in meiner Navigationsschublade zusammen mit dem dunklen Hintergrund weiß zu machen. Hier ist die Art , wie ich über das tut dies in zu gehen , ich versuche , 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);
        }

Der nightModeBoolesche Wert ist irrelevant, da er funktioniert. Wenn der Nachtmodus auf Ein (0) eingestellt ist, wird jeder in der Navigationsleiste ausgewählte Menüpunkt weiß. Dies geschieht jedoch nur, wenn jedes Element ausgewählt wird, was offensichtlich unpraktisch ist. Hier ist meine 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>

Ich verwende für jedes Element weiße Symbole auf einem transparenten Hintergrund, die jedoch auf dem schwarzen Hintergrund der Navigationsschublade als schwarz angezeigt werden. Ich habe versucht, nach einer XML-Lösung zu suchen, um die Farbe des Textes zu ändern, und ich kratzte mir am Kopf, weil ich nicht weiß, warum dies übersehen wurde.

Kann mir jemand eine dynamische Lösung anbieten, um das zu erreichen, was ich erreichen möchte? Jede Hilfe wird geschätzt, danke!

BEARBEITEN: Ich verwende keine Drittanbieter-Bibliothek, sondern die in der Support-Bibliothek bereitgestellte Navigationsansicht. Hier ist das 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>

Warum ändern Sie nicht einfach das Aktivitätsthema von Lightnach Darkund umgekehrt?
Emil

@Boss mit der Art und Weise, wie meine App programmiert ist, wäre es ein langwieriger Prozess. Ich habe dieses Tag / Nacht-Thema, das überall perfekt funktioniert, außer in meiner Navigationsschublade. Alles, was ich brauche, ist eine Lösung dafür.
Wasimsandhu

Antworten:


238
 <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
Dadurch wird die Farbe jedes Elements der Navigationsleiste auf "Ihre Farbe" gesetzt. Gibt es eine Möglichkeit, die Farbe für jede Gruppe der Schublade individuell zu ändern?
Akeshwar Jha

2
@Akeshwar, Sie können versuchen, dies programmgesteuert zu tun. Ich würde dies jedoch nicht empfehlen, da dies gegen die Materialrichtlinien verstößt.
Abdellah Benhammou

Ja, es gibt auch eine Möglichkeit, die Farben individuell zu ändern!

2
@NehaTyagi So ändern Sie den Schriftstil in Menüelementen aus XML.
Chetan Joshi

@ Hara Hara Mahadevaki Kannst du mir das bitte sagen?
Anju Jo

43

Verwenden Sie die App: itemIconTint in Ihrer Navigationsansicht, 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
und was ist mit der ausgewählten Artikeltextfarbe?
Usman Rana

28

NavigationViewhat eine Methode namens setItemTextColor(). Es verwendet 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);

Hier habe ich diese Antwort bekommen. Und dann gleich nach dem Zuweisen meiner Navigationsansicht:

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

Hallo, gibt es eine Möglichkeit, die Farbe jeder Gruppe der Navigationsschublade einzeln zu ändern?
Akeshwar Jha

immer noch seine graue Farbe

Wie ändere ich die Gruppentextfarbe?
Ari

15

Mehr Optionen:

Sie können den Gruppentitel auch ändern, indem Sie "textColorSecondary" überschreiben.

In Ihrer styles.xml

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

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

Diese Lösung hat mir geholfen, das Farbproblem zu beheben. Danke dir!
Mark Delphi

10

App hinzufügen : itemTextColor = "# fff" in Ihrer Navigationsansicht wie

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

5

Ich habe den folgenden Code verwendet, um die Textfarbe der Navigationsleiste in meiner App zu ändern.

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

4

Das funktioniert bei mir. Anstelle von customTheme können Sie Ihr Thema in Stile einfügen. In diesem Code können Sie auch die Schriftart und die Textgröße ändern.

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

Hier ist meine Navigationsansicht

<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

Sie können dies einfach tun, indem Sie Ihr Thema zu Ihrer Navigationsansicht hinzufügen.

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

und in Ihrer style.xml-Datei fügen Sie dieses Thema hinzu

   <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

Sie können Drawables in verwenden

App: itemTextColor App: itemIconTint

Dann können Sie den überprüften Zustand und den normalen Zustand mit einem Zeichen steuern

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

3

Versuchen Sie dies in der Java-Klasse

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

Wenn in Zukunft jemand hierher kommt, der Navigation Drawer Activity verwendet (bereitgestellt von Studio im Fenster "Eingabeaufforderung")

Die Antwort ist -

Verwenden Sie dies vor 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);

und verwenden Sie dies in onNavigationItemSelected () in MainActivity (Sie müssen diese Funktion nicht schreiben, wenn Sie die Navigation Drawer-Aktivität verwenden, sie wird in MainActivity hinzugefügt).

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

Tipp - Fügen Sie diesen Code vor If else hinzu. Bedingung in onNavigationItemSelected ()


2

Dies kann helfen. Es hat bei mir funktioniert

Gehen Sie zu activity_ "Name der Navigationsaktivität" .xml Geben Sie diesen Code in NavigationView ein

app:itemTextColor="color of your choice"

1

Sie können auch ein benutzerdefiniertes Thema definieren, das von Ihrem Basisthema abgeleitet ist:

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

und dann in Ihrer Datei styles.xml:

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

Sie können dem benutzerdefinierten Thema auch weitere Attribute zuweisen.


1

Verwenden Sie einen SpannableString wie folgt, um die individuelle Textfarbe eines einzelnen Elements zu ändern:

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

In meinem Fall musste ich die Farbe nur eines Menüpunkts ändern - "Abmelden". Ich musste eine Rekursion durchführen und die Titelfarbe ändern:

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

        }

    }

Ich habe dies in der onCreate-Methode der Aktivität getan.


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

So legen Sie den Artikelhintergrund mit der App fest: 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>

0

itemIconTint, wenn Sie die Symbolfarbe ändern möchten

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

um die Textfarbe der Navigationsleiste zu ändern

wir gebrauchen app:itemTextColor="@color/white"

um die Farbe der Navigationsschublade zu ändern

verwenden 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"
        />
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.