web-dev-qa-db-fra.com

Comment styliser la NavigationView de la bibliothèque Design Support?

J'utilise donc le NavigationView fourni par Android Design Support Library

enter image description here

Je n'arrive pas à trouver d'exemples sur la façon de le coiffer.

Jusqu'à présent, j'ai:

<Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_height="match_parent"
    Android:layout_width="wrap_content"
    Android:layout_gravity="start"
    app:headerLayout="@layout/header"
    app:menu="@menu/drawer"
    app:itemTextColor="@color/black"
    app:itemIconTint="@color/black"/>

Le style de l'en-tête est aussi simple que sous sa propre mise en page XML, mais le corps est un fichier de ressources de menu et non une mise en page.

  • app:itemTextColor change la couleur du texte
  • app:itemIconTint change la couleur de l'icône
  • app:itemBackground modifie la couleur d'arrière-plan de l'élément

Alors, comment régler

  • arrière-plan de l'élément sélectionné
  • couleur du texte de l'élément sélectionné
  • élément sélectionné icône teinte
androidmaterial-designandroid-support-libraryandroiddesignsupportnavigationview
29
Frozen Crayon

J'ai répondu à une question similaire ici .

Fondamentalement, ce que vous devez faire est d'utiliser un Color State List Resource. Pour cela, créez d'abord un nouveau xml (par exemple tiroir_item.xml) dans le répertoire color (qui devrait être dans le répertoire res.) Si vous n'avez pas de répertoire nommé coloriez déjà, créez-en un.

Maintenant à l'intérieur drawer_item.xml faire quelque chose comme ça

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="checked state color" Android:state_checked= "true" />
    <item Android:color="your default color" />
</selector>

Pour itemBackground, un dessin séparé doit également être placé dans le dossier dessinable. Le nom est le même drawer_item. Android:drawable la propriété doit être définie au lieu de Android:color pour itemBackground:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
       Android:drawable="@drawable/shape_rectangle_checked"

        Android:state_checked= "true" />
    <item Android:drawable="@drawable/shape_rectangle" />

</selector>

Fichier shape_rectangle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shape="rectangle">
<solid Android:color="#ffffff" /> <!--white color -->
</shape>

Fichier shape_rectangle_checked:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shape="rectangle">
<solid Android:color="#25aaf1" /> <!--blue color -->
</shape>

puis définissez votre navigation comme ceci

app:itemIconTint="@color/drawer_item" //notice here
app:itemTextColor="@color/drawer_item" //and here
app:itemBackground="@drawable/drawer_item"//and here for changing the background color of the item which is checked
45
Sash_KP

Pour développer la réponse de @ Sash_KP, pour le xml dans le dossier drawable, vous n'avez pas besoin du @drawable/shape_rectangle et @drawable/shape_rectangle_check. Vous pouvez simplement utiliser @color/your_color.

Aussi pour API >= 21, J'ai remarqué que les éléments du menu de navigation ont par défaut un sélecteur prédéfini. Vous remarquerez que si vous touchez et maintenez l'élément de menu, une ondulation apparaîtra. L'utilisation d'un itemBackground personnalisé ne remplacera pas l'ondulation par défaut. Par conséquent, si vous utilisez un ripple drawable cela va créer deux ondulations! Également des éléments de menu avec ripple drawables ne vous permet pas d'avoir un état enfoncé pour une raison quelconque (l'ondulation par défaut n'apparaîtra que si vous maintenez la touche enfoncée).

Donc pour API >= 21 Je ne recommanderais pas d'utiliser un ripple drawable. Utilisez simplement un selector drawable sans ondulations personnalisées.

3
mco