Comment personnaliser l’arrière-plan de l’article et la couleur du texte de l’élément dans NavigationView?

Je veux réaliser quelque chose comme ceci montré dans les documents de conception de matériel .

colorControlHighlight est utilisé pour l’arrière-plan des éléments cochés.

J’ai besoin de personnaliser:

  • fond décoché
  • couleur du texte vérifiée
  • couleur du texte non cochée

NavigationDrawer (NavigationView) a trois options pour la configuration des éléments cochés / sélectionnés.

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

Couleur de l’icône et du texte

Les deux premières options (icône et texte) nécessitent une ressource de liste d’états de couleurhttps://developer.android.com/guide/topics/resources/color-list-resource.html .

Une menu_text_color ressource menu_text_color doit être créée en res / color . Ce contenu de fichier devrait ressembler à:

       
  • @color/colorWhite – ressource de couleur utilisée pour l’élément coché

  • @color/colorBlack – ressource de couleur utilisée pour un élément non contrôlé

J’ai créé une ressource pour les deux, mais il est possible de créer deux fichiers séparés – un pour le texte, un pour l’icône.

Contexte (itemBackground)

L’option d’arrière-plan nécessite une ressource pouvant être dessinée au lieu de la couleur, chaque tentative de définition de la couleur se terminera par une exception. Une ressource pouvant être dessinée doit être créée dans res / drawable et son contenu doit ressembler à:

       

Il n’est pas nécessaire de créer des tirables qui simulent la couleur (dans d’autres solutions, j’ai vu de telles propositions – peut-être pour la version plus ancienne de sdk), la couleur peut être utilisée directement dans ce fichier. Dans cet exemple de fichier, j’utilise une couleur transparente pour l’élément non coché et colorPrimary pour l’élément coché.

Dépannage et notes importantes

  • En ressource d’arrière-plan, utilisez toujours state_checked = “false” au lieu de default, avec la couleur par défaut cela ne fonctionnera pas
  • Pour les menus créés par programme / dynamic, n’oubliez pas de définir les éléments comme vérifiables :

Exemple de code (élément de menu dynamic ajouté):

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

Si les éléments ne sont pas réglables, l’arrière-plan ne fonctionnera pas (la couleur du texte et des icons surprendra comme prévu).

itemBackground , itemIconTint et itemTextColor sont des atsortingbuts xml simples qui peuvent être définis, bien que vous deviez utiliser un préfixe personnalisé à la place de l’ android: un.

Exemple

     

Remarque: Dans ce cas, la couleur du texte, la teinte de l’icône et l’arrière-plan sont statiques. Si vous voulez changer la couleur du texte (par exemple rose si décoché et sarcelle lorsque coché), vous devez utiliser un ColorStateList .

Exemple

Créez un nouveau fichier * .xml dans /res/colorappelons -le state_list.xml – avec le contenu suivant:

       

et puis simplement le référencer comme ceci: app:itemTextColor="@color/state_list"

La même chose vaut pour itemIconTint . itemBackground attend un identifiant de ressource. Voir aussi les documents .

Utiliser colorControlHighlight est une bonne solution pour moi. Sachez qu’avec la dernière bibliothèque de support, vous pouvez définir un thème (pas seulement le style) pour chaque widget; Par exemple, vous pouvez définir le colorControlHighlight dans le thème NavigationView et cela ne sera pas appliqué au rest des widgets.

Vous pouvez utiliser ce code par programmation:

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

Maintenant, dans la vue de navigation, vous pouvez également fournir votre propre vue d’article. Avec le nouvel appcompat-v7:23.1.0 vous pouvez

définir des vues personnalisées pour les éléments via app: actionLayout ou utiliser MenuItemCompat.setActionView ().

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

De cette façon, vous pouvez créer votre propre mise en page avec TextView et modifier les backgrounds/colors/fonts comme vous le souhaitez. J’espère que c’était utile 🙂 Source

Si vous souhaitez modifier uniquement la couleur d’un élément de menu de votre activité en fonction des événements, consultez ce blog d’HANIHASHEMI:

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

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

Méthode d’appel

 setTextColorForMenuItem(item, R.color.colorPrimary); 

Si vous travaillez avec Xamarin Android, essayez ceci:

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

Méthode d’appel:

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

Vous pouvez le faire en utilisant la déclaration suivante:

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