How to customize item background and item text color inside NavigationView? How to customize item background and item text color inside NavigationView? android android

How to customize item background and item text color inside NavigationView?


itemBackground, itemIconTint and itemTextColor are simple xml-attributes that can be set, though you have to use a custom prefix instead of the android: one.

Example

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

Note: In this case the text color, icon tint and background are static. If you want to change the color of the text (e.g. pink when unchecked and teal when checked) you should use a ColorStateList.

Example

Create a new *.xml file in /res/color - let's name it state_list.xml - with the following content:

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

and then simply reference it like this: app:itemTextColor="@color/state_list"

The same goes for itemIconTint. itemBackground expects a resource id. See the docs as well.


NavigationDrawer(NavigationView) has three options for configuration of checked/selected items.

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

Icon and text color

First two options ( icon and text ) need color state list resource - https://developer.android.com/guide/topics/resources/color-list-resource.html.

Such menu_text_color resource needs to be created in res/color. This file content should look similar to:

<!-- 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 - color resource used for checked item

  • @color/colorBlack - color resource used for unchecked item

I have created one resource for both, but it is possible to create two separated files - one for text, one for icon.

Background (itemBackground)

Background option needs drawable resource instead of color, every try to set color will end by exception. Drawable resource need to be created in res/drawable and its content should look similar to:

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

There is no need to created any drawables which simulates color ( in other solutions I saw such propositions - maybe for older sdk version ), color can be used in this file directly. In this example file I am using transparent color for not checked item and colorPrimary for checked item.

Troubleshooting and important notes

  • In background resource always use state_checked="false" instead of default, with default color it will not work
  • For dynamic/programmatically created menu remember to set items as checkable:

Code example ( dynamic menu item add ):

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

If items will not be set as checkable then background will not work ( text and icon color surprising will work as expected ).


Using colorControlHighlight is a good solution to me. Be aware that with the latest support library, you can define a theme (not just the style) for every widget; for example you can define the colorControlHighlight into the NavigationView theme and this will not be applied to the rest of widgets.