How can I customize on specific menu item on Navigation drawer?

Question

I've been trying to put the background color on a specific item from the menu on Navigation Drawer. However, I had found some solutions that were coding on Navigation Drawer but it changes the whole item's color or for selected items.

This is the image what I want to make:

As you can check from the image, I want to put a different background and text color on that single item which is "logout" item's background color. So I tried to customize that menu item using app:actionLayout.

So far I could make a bit but there is still some layout regulation problem and so on.

Here is the image I've done so far: IMAGE

I'd be gladful for who share and solve this issue. Thanks!

menu/activity_main_drawer.xml

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">
<item android:title="@string/nav_menu_mypage">
    <menu>
        <item
            android:id="@+id/nav_mystudy"
            android:icon="@drawable/nav_mypocket"
            android:title="@string/mypage_mypocket" />
        <item
            android:id="@+id/nav_search"
            android:icon="@drawable/nav_search"
            android:title="@string/mypage_search" />
        <item
            android:id="@+id/nav_logout"
            android:title=""
            app:actionLayout="@layout/drawer_menu_item"
            app:showAsAction="always"/>
        <!--app:itemBackground="@drawable/nav_logout_background"-->
    </menu>
</item>
</group>

</menu>

layout/drawer_menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="horizontal">

<ImageView
    android:layout_width="30dp"
    android:layout_height="match_parent"
    android:src="@drawable/nav_logout"
    android:gravity="center_vertical"/>

<TextView
    android:id="@+id/item_text"
    android:layout_marginLeft="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:text="Logout"
    android:textSize="15dp"
    android:textColor="@color/white"/>
</LinearLayout>

layout/activity_main.xml

    <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:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:itemIconTint="@drawable/nav_item_icon_color"
        app:itemTextColor="@drawable/nav_item_text_color"
        app:itemBackground="@drawable/nav_item_background" />

drawable/nav_item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:drawable="@color/drawer_menu_item_bg_pressed"/>  <!-- #F0F0F0 -->
<item
    android:state_checked="true"
    android:drawable="@color/drawer_menu_item_bg_checked"/>  <!-- #efefef -->
<item
    android:state_selected="true"
    android:drawable="@color/drawer_menu_item_bg_checked"/>
<item
    android:drawable="@android:color/transparent"/>
</selector>

That would be a custom view for your item which you can do by setting `actionView` on your menu item. its basically a reference to a layout file that would be used for that specific item. here is a reference for more info: [developer.android.com](https://developer.android.com/reference/android/view/MenuItem#setActionView(int)) — Kayvan N, Jul 09 '18 at 04:38

score 1 · Answer 1 · answered Jul 09 '18 at 04:31

try this:

Set text color for menu item:

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

Reset all menu items text color:

 private void resetAllMenuItemsTextColor(NavigationView navigationView) {
 for (int i = 0; i < navigationView.getMenu().size(); i++)
 setTextColorForMenuItem(navigationView.getMenu().getItem(i), R.color.textPrimary);
 }

We are almost done, we should just set text color for each menu item in onNavigationItemSelected method like below:

@Override
 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
 resetAllMenuItemsTextColor(navigationView);
 setTextColorForMenuItem(item, R.color.colorPrimary);

 switch (item.getItemId()) {
 case R.id.nav_search_jobs:
  setTextColorForMenuItem(item, R.color.nav_search);
  // do other stuff
  break;
 case R.id.nav_job_recommended:
  setTextColorForMenuItem(item, R.color.nav_recommendation);
  // do other stuff
  break;
  }

   }

this code changes the text color only? which snippet of code is used for changing the background color of a single item? — Anjani Mittal, Jul 09 '18 at 04:36

score 0 · Answer 2 · answered Jul 09 '18 at 05:04

You must use android:background="color" for back color of navigation menu like:

<android.support.design.widget.NavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:id="@+id/shitstuff"
    app:itemTextColor="@color/black"
    app:menu="@menu/drawermenu"
    android:background="@color/colorAccent"
    android:layout_marginTop="-24dp"
    />

and for items color use itemTextColor="color"

How can I customize on specific menu item on Navigation drawer?

2 Answers2