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

问题

I wanna achieve something like this shown in the Material Design Docs.

colorControlHighlight is used for the Background on checked items.

I need to customize:

background unchecked
text color checked
text color unchecked

回答1:

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

app:itemIconTint="@color/menu_text_color" //icon color
app:itemTextColor="@color/menu_text_color" //text color
app: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 ).

回答2:

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.

回答3:

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.

回答4:

If you want change only one menu item color from your activity based in events, see this blog by 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);
}

Call method

setTextColorForMenuItem(item, R.color.colorPrimary);

If you work with Xamarin Android try this:

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

Call Method:

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

回答5:

You can use programmatically this code :

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

回答6:

Now, in navigation view you can also provide your own item view. With new appcompat-v7:23.1.0 you can

set custom views for items via app:actionLayout or using MenuItemCompat.setActionView().

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

This way you can create your own layout with TextView and change backgrounds/colors/fonts however you want. Hope this was helpful :) Source

回答7:

You can do it using the following statement:

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

回答8:

If you want to do this programmatically:

Based on Jhon's answer:

You can use Kotlin extension like this:

fun NavigationView.setTextColorForMenuItems(@ColorInt color: Int) {
    for (i: Int in 0 until menu.size()) {
        val menuItem = menu.getItem(i)
        val spanString = SpannableString(menuItem.title.toString())
        spanString.setSpan(ForegroundColorSpan(color), 0, spanString.length, 0)
        menuItem.title = spanString
    }
}

Then call

nav_view.setTextColorForMenuItems(Color.BLACK)

来源：https://stackoverflow.com/questions/30594025/how-to-customize-item-background-and-item-text-color-inside-navigationview

标签

android

material-design

drawerlayout

android-design-library

navigationview