Navigation Drawer item divider with selected background color

Question

I have a navigation drawer in my android app. Here's the code:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:itemBackground="@drawable/nav_divider"/>

I've used one the answer to this post to add dividers between the items. Here's the nav_divider drawable that I'm using as itemBackground in my NavigationView:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

Now, the question is how do I change the background color of the selected item. I know how to do that without the divider, but with the divider, it's more complicated.

UPDATE:

Here's what I've tried:

I created another drawable called nav_divider_selected which is exactly like the nav_divider above except with different colors.

Then, I created a drawer_item_background drawable like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/nav_divider_selected" android:state_selected="true"/>
        <item android:drawable="@drawable/nav_divider"/>
</selector>

And, replaced the itemBackground of the NavigationView with this new selector (app:itemBackground="@drawable/drawer_item_background"). But, it didn't work. The items all look black, for some reason.

do you want both the top and bottom divider to be highlighted or only the bottom, can you post a screenshot of what you want the end result should look like — Aniruddha K.M, Jul 17 '19 at 02:14
I don’t want the divider to be highlighted. I want the selected item to be highlighted. I don’t think that needs a screenshot, does it? — ataravati, Jul 17 '19 at 02:43
I know it should be done with a selector, but how should the selector look like? — ataravati, Jul 17 '19 at 02:45
I see that you have not the selector as the background, you should do so in the items of your layer list — Aniruddha K.M, Jul 17 '19 at 04:28
what happens if you set it the selector as background of the layer list items — Aniruddha K.M, Jul 17 '19 at 04:30
That would be a different selector for the color. I tried that as well, but still doesn't work. — ataravati, Jul 17 '19 at 04:31
By the way, if you have an answer, I would appreciate it if you posted it here. — ataravati, Jul 17 '19 at 04:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196548/discussion-between-war-hero-and-ataravati). — Aniruddha K.M, Jul 17 '19 at 04:38

score 0 · Accepted Answer · answered Jul 17 '19 at 15:02

I got it. It was a simple issue. I was just using the wrong state. So, here's the solution. I created two different layer lists (to add the divider to the navigation items):

nav_divider:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

nav_divider_selected:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_blue"/>
        </shape>
    </item>
</layer-list>

Then, created a drawer_item_background drawable like this (state_checked should be used not state_selected):

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/nav_divider_selected" android:state_checked="true"/>
        <item android:drawable="@drawable/nav_divider"/>
</selector>

And, then I used this drawable as itemBackground in my NavigationView:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:itemBackground="@drawable/drawer_item_background"/>

score 0 · Answer 2 · answered Aug 29 '19 at 10:43

Also if in-case you do not want to use a selector to achieve that you can do so like this

<group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_share"
                    android:icon="@drawable/ic_menu_share"
                    android:title="@string/menu_share" />
            </group>

By wrapping the element under <group android:checkableBehavior="single"> we get a selected background.

score 0 · Answer 3 · answered Mar 04 '20 at 14:46

Try the below item_background.xml in app:itemBackground="@drawable/item_background" for NavigationView

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/rgb_red" android:state_checked="true" />
    <item android:drawable="@color/rgb_red" android:state_activated="true" />
    <item>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:drawable="@color/rgb_white" />
          <item android:start="-2dp"
                android:top="-2dp"
                android:end="-2dp">
               <shape>
                 <solid android:color="@android:color/transparent" />
                 <stroke android:width="1dp" android:color="@color/rgb_pale_gray"/>
               </shape>
          </item>
        </layer-list>
    </item>
</selector>

hope it will help you

Navigation Drawer item divider with selected background color

3 Answers3