Wie kann ich den Hintergrund und die Textfarbe von Artikeln in NavigationView anpassen?

Ich möchte so etwas erreichen, wie in der gezeigt Materialdesign-Dokumentation.

colorControlHighlight wird für den Hintergrund von aktivierten Elementen verwendet.

Ich muss anpassen:

• Hintergrund ungeprüft
• Textfarbe überprüft
• Textfarbe deaktiviert

itemBackground, itemIconTint und itemTextColor sind einfache XML-Attribute, die gesetzt werden können, obwohl Sie ein benutzerdefiniertes Präfix anstelle von verwenden müssen android: eins.

Beispiel

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Other layout views -->

    <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/my_ripple"
        app:itemIconTint="#2196f3"
        app:itemTextColor="#009688"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

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

Notiz: In diesem Fall sind Textfarbe, Symbolfarbe und Hintergrund statisch. Wenn Sie die Farbe des Textes ändern möchten (z. B. rosa, wenn nicht aktiviert, und blaugrün, wenn aktiviert), sollten Sie a verwenden ColorStateList.

Beispiel

Erstellen Sie eine neue *.xml-Datei in /res/color – Nennen wir es state_list.xml – mit folgendem Inhalt:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is used when the Navigation Item is checked -->
    <item android:color="#009688" android:state_checked="true" />
    <!-- This is the default text color -->
    <item android:color="#E91E63" />
</selector>

und dann einfach so darauf verweisen: app:itemTextColor="@color/state_list"

Das gleiche gilt für itemIconTint. itemBackground erwartet eine Ressourcen-ID. Siehe die Dokumente sowie.

Navigationsschublade(NavigationView) hat drei Optionen für die Konfiguration von aktivierten/ausgewählten Elementen.

app:itemIconTint="@color/menu_text_color" //icon color
app:itemTextColor="@color/menu_text_color" //text color
app:itemBackground="@drawable/menu_background_color" //background

Symbol- und Textfarbe

Zuerst zwei Optionen (Symbol und Text) benötigen Farbzustandslistenressource – https://developer.android.com/guide/topics/resources/color-list-resource.html.

Eine solche menu_text_color Ressource muss in erstellt werden Auflösung/Farbe. Der Inhalt dieser Datei sollte ungefähr so ​​aussehen:

<!-- res/color/menu_text_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/colorWhite" android:state_checked="true" />
  <item android:color="@color/colorBlack" android:state_checked="false"/>
</selector>

• @color/colorWhite – Farbressource, die für das markierte Element verwendet wird

• @color/colorBlack – Farbressource, die für ungeprüfte Elemente verwendet wird

Ich habe eine Ressource für beide erstellt, aber es ist möglich, zwei getrennte Dateien zu erstellen – eine für Text, eine für das Symbol.

Hintergrund (itemBackground)

Die Hintergrundoption benötigt eine darstellbare Ressource anstelle von Farbe, jeder Versuch, eine Farbe festzulegen, wird durch eine Ausnahme beendet. Darstellbare Ressourcen müssen in erstellt werden res/ziehbar und sein Inhalt sollte ähnlich aussehen wie:

<!-- res/drawable/menu_background_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@android:color/transparent"  android:state_checked="false"/>
  <item android:drawable="@color/colorPrimary" android:state_checked="true"/>
</selector>

Es ist nicht erforderlich, Drawables zu erstellen, die Farben simulieren (in anderen Lösungen habe ich solche Vorschläge gesehen – vielleicht für ältere SDK-Versionen), Farben können direkt in dieser Datei verwendet werden. In dieser Beispieldatei verwende ich transparente Farbe für nicht markierte Elemente und colorPrimary für geprüfte Artikel.

Fehlerbehebung und wichtige Hinweise

• Im Hintergrund Ressource immer verwenden state_checked=”false” statt Standard, mit Standardfarbe wird es nicht funktionieren
• Für dynamische/programmgesteuert erstellte Menüs Denken Sie daran, Elemente als überprüfbar festzulegen:

Codebeispiel ( dynamischer Menüpunkt hinzufügen ):

  menu.add(group_id, item_id, Menu.NONE, item_name).setCheckable(true).setChecked(false);

Wenn Elemente nicht als überprüfbar festgelegt werden, funktioniert der Hintergrund nicht (Überraschende Text- und Symbolfarbe funktionieren wie erwartet).

Mit dem MaterialComponents-Bibliothek Sie können diese Attribute verwenden:

• app:itemShapeFillColor: Hintergrundelementfarbe
• app:itemIconTint: Farbton des Symbols
• app:itemTextColor: Textfarbe

Im Layout:

<com.google.android.material.navigation.NavigationView
    app:itemShapeFillColor="@color/shape_selector"
    app:itemIconTint="@color/icon_tint_selector"
    app:itemTextColor="@color/text_color_selector"
    ../>

In einem benutzerdefinierten Stil:

<style name="..." parent="Widget.MaterialComponents.NavigationView" >
   <item name="itemShapeFillColor">@color/shape_selector</item>
   <item name="itemIconTint">@color/icon_tint_selector</item>
   <item name="itemTextColor">@color/text_color_selector</item>
</style>

Für die itemIconTint und itemTextColor Sie können einen Selektor wie diesen verwenden:

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

Für die itemShapeFillColor Sie können einen Selektor verwenden wie:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_activated="true"/>
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:color="@android:color/transparent"/>
</selector>

Nur ein Schlussbemerkung. Achten Sie bei der Verwendung auf die itemBackground.
Es ist eingestellt @null um einen geformten Hintergrund zu verwenden, der programmgesteuert von erzeugt wird NavigationView Wenn itemShapeAppearance und/oder itemShapeAppearanceOverlay ist eingestellt (Standardverhalten).
Dieser Hintergrund wird mit dem gestaltet itemShape* Attribute.

Einstellung itemBackground überschreibt den programmatischen Hintergrund und bewirkt, dass die in den itemShape*-Attributen festgelegten Werte ignoriert werden.

Die Verwendung von colorControlHighlight ist für mich eine gute Lösung. Beachten Sie, dass Sie mit der neuesten Support-Bibliothek für jedes Widget ein Thema (nicht nur den Stil) definieren können. Beispielsweise können Sie das colorControlHighlight im Design NavigationView definieren und dies wird nicht auf die restlichen Widgets angewendet.

Wenn Sie nur die Farbe eines Menüelements von Ihrer Aktivität basierend auf Ereignissen ändern möchten, lesen Sie diesen Blog von HANIHASHEMI:

https://hanihashemi.com/2017/05/06/change-text-color-of-menuitem-in-navigation-drawer/

private void setTextColorForMenuItem(MenuItem menuItem, @ColorRes int color) {
  SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
  spanString.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, color)), 0, spanString.length(), 0);
  menuItem.setTitle(spanString);
}

Methode aufrufen

setTextColorForMenuItem(item, R.color.colorPrimary);

Wenn Sie mit Xamarin Android arbeiten, versuchen Sie Folgendes:

private void SetTextColorForMenuItem(IMenuItem menuItem, Android.Graphics.Color color)
        {
            SpannableString spanString = new SpannableString(menuItem.TitleFormatted.ToString());
            spanString.SetSpan(new ForegroundColorSpan(color), 0, spanString.Length(), 0);
            menuItem.SetTitle(spanString);
        }

Anrufmethode:

SetTextColorForMenuItem(navigationView.Menu.GetItem(0), Android.Graphics.Color.OrangeRed);

Sie können diesen Code programmgesteuert verwenden:

int[][] states = new int[][] {
    new int[] { android.R.attr.state_enabled}, // enabled
    new int[] {-android.R.attr.state_enabled}, // disabled
    new int[] {-android.R.attr.state_checked}, // unchecked
    new int[] { android.R.attr.state_pressed}  // pressed
};

int[] colors = new int[] {
    Color.BLACK,
    Color.RED,
    Color.GREEN,
    Color.BLUE
};

ColorStateList myList = new ColorStateList(states, colors);

  nav_view.setItemIconTintList(myList);

Jetzt können Sie in der Navigationsansicht auch Ihre eigene Artikelansicht bereitstellen. Mit neuem appcompat-v7:23.1.0 Sie können

Legen Sie benutzerdefinierte Ansichten für Elemente über app:actionLayout oder mit MenuItemCompat.setActionView() fest.

View view = View.inflate(context, R.layout.your_custom_nav_layout_item, null);
MenuItemCompat.setActionView(menuItem, view); 

Auf diese Weise können Sie Ihr eigenes Layout mit TextView erstellen und ändern backgrounds/colors/fonts wie auch immer du willst. Hoffe das war hilfreich 🙂
Quelle