wake-up-neo.com

Wie können Sie den Elementhintergrund und die Elementtextfarbe in NavigationView anpassen?

Ich möchte etwas erreichen, das in den Material Design Docs angezeigt wird.

colorControlHighlight wird als Hintergrund für markierte Elemente verwendet.

Ich muss anpassen:

  • hintergrund nicht aktiviert
  • textfarbe markiert
  • textfarbe nicht markiert
androidmaterial-designdrawerlayoutandroid-design-librarynavigationview
71
Xan

NavigationDrawer (NavigationView) bietet drei Optionen für die Konfiguration von ausgewählten/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

Die ersten beiden Optionen (Symbol und Text) benötigen die color state list-Ressource - https://developer.Android.com/guide/topics/resources/color-list-resource.html . 

Diese menu_text_color-Ressource muss in res/color erstellt werden. Dieser Dateiinhalt sollte folgendermaßen 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 geprüfte 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 und eine für Symbol.

Hintergrund (itemBackground)

Die Hintergrundoption erfordert eine anzeigbare Ressource anstelle von Farbe. Jeder Versuch, die Farbe festzulegen, wird durch eine Ausnahme beendet. Zeichnungsressourcen müssen in res/drawable erstellt werden und ihr Inhalt sollte folgendermaßen aussehen:

<!-- 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 notwendig, Zeichnungsobjekte zu erstellen, die Farbe simulieren (in anderen Lösungen habe ich solche Vorschläge gesehen - möglicherweise für ältere SDK-Versionen). Farbe kann in dieser Datei direkt verwendet werden. In dieser Beispieldatei verwende ich transparente Farbe für nicht geprüfte Elemente und colorPrimary für geprüfte Elemente.

Fehlerbehebung und wichtige Hinweise

  • Verwenden Sie in der Hintergrundressource immer state_checked = "false" anstelle von default, mit der Standardfarbe wird es nicht funktionieren
  • Für dynamisches/programmatisch erstelltes Menü Denken Sie daran, Elemente als überprüfbar zu setzen:

Codebeispiel (dynamischer Menüpunkt hinzufügen): 

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

Wenn Elemente nicht als aktivierbar festgelegt werden, funktioniert der Hintergrund nicht (Text- und Symbolfarbe überraschend funktionieren wie erwartet).

83
Maciej Sikora

itemBackground, itemIconTint und itemTextColor sind einfache xml-Attribute, die festgelegt werden können. Sie müssen jedoch ein benutzerdefiniertes Präfix anstelle von Android: verwenden. 

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>

Hinweis: In diesem Fall sind Textfarbe, Symbolfarbton und Hintergrund statisch. Wenn Sie die Farbe des Texts ändern möchten (z. B. Rosa bei deaktiviertem Kontrollkästchen und Teal bei Aktivierung), sollten Sie eine ColorStateList verwenden.

Beispiel

Erstellen Sie eine neue * .xml-Datei in /res/color - nennen wir sie 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 referenzieren Sie es einfach so: app:itemTextColor="@color/state_list"

Dasselbe gilt für itemIconTint. itemBackground erwartet eine Ressourcen-ID. Siehe auch die docs .

125
reVerse

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

7
Mimmo Grottoli

Wenn Sie nur eine Menüelementfarbe aus Ihrer Aktivität basierend auf Ereignissen ändern möchten, lesen Sie dieses 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);
        }

Aufrufmethode:

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

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);
3
Ahmad Aghazadeh

In der Navigationsansicht können Sie jetzt auch eine eigene Artikelansicht erstellen. Mit dem neuen appcompat-v7:23.1.0 können Sie 

benutzerdefinierte Ansichten für Elemente über die App festlegen: actionLayout oder MenuItemCompat.setActionView ().

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

Auf diese Weise können Sie mit TextView Ihr eigenes Layout erstellen und backgrounds/colors/fonts beliebig ändern. Hoffe das war hilfreich:) Quelle

2
hkop

Sie können dies mit der folgenden Anweisung tun:

navigationView.setItemBackground(ContextCompat.getDrawable(CustomerHomeActivity.this, R.color.transparent));
0
Sohaib Khalid