Can't change selected item's background color in Navigation Drawer

Question

I want to set different color to selected item on Navigation Drawer and here's my code

 <android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="@dimen/navigation_width"
    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/drawer_list_selector"
    app:itemBackground="@drawable/drawer_list_selector"
    app:itemTextColor="@drawable/nav_item_text"
    />

drawer_list_lesector.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="@drawable/light_pink_color" />
    <item android:state_selected="true" android:drawable="@drawable/light_pink_color"/>
    <item android:state_checked="true" android:drawable="@drawable/light_pink_color"/>
    <item android:state_focused="true"  android:drawable="@drawable/light_pink_color"/>
    <item android:state_active="true"  android:drawable="@drawable/light_pink_color"/>
    <item android:drawable="@android:color/transparent" />
 </selector>

light_grey_color.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F1F1F1"/>
</shape>

light_pink_color.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F1E1F1"/>
</shape>

and nav_item_text.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_checked="true" />
    <item android:color="#BBBBBB" />
</selector>

but it's still doesn't change selected item's color

score 1 · Answer 1 · answered Apr 07 '20 at 01:03

I recently had the same issue and finally got to the bottom of it.

In the menu definition file @menu/activity_main_drawer you need to add android:checkable="true" to each item that you want to be checkable or the itemBackground will not see the checked state.

Don't ask me why itemIconTint and itemTextColor work just fine without this but itemBackground needs it, makes no sense to me either.

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

See the Sash_KP Answer

Well you can achieve this using Color State Resource. If you notice inside your NavigationView you're using

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

Here instead of using @color/black or @color/primary_test, use a Color State List Resource. For that, first create a new xml (e.g drawer_item.xml) inside color directory (which should be inside res directory.) If you don't have a directory named color already, create one.

Now inside drawer_item.xml do something like this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="checked state color" android:state_checked="true" />
    <item android:color="your default color" />
</selector>

Final step would be to change your NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@color/drawer_item"// and here for changing the background color of the item which is checked
    app:menu="@menu/menu_drawer">

Like this you can use separate Color State List Resources for IconTint, ItemTextColor, ItemBackground.

Now when you set an item as checked (either in xml or programmatically), the particular item will have different color than the unchecked ones.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 07 '16 at 06:46

Arjun saini

3,891
2
16
44

I wrote this code using those answers but it still not working, I don't know maybe I forgot something – misha Sep 07 '16 at 06:54
what you want? according to your work ... it's like that...see gif – Arjun saini Sep 07 '16 at 07:54
yes, I want something like this but I'm getting this exception – misha Sep 07 '16 at 09:10
Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #3: tag requires a 'drawable' attribute or child tag defining a drawable – misha Sep 07 '16 at 09:11
you need to take these drawable in drawable folder – Arjun saini Sep 07 '16 at 09:18
your code work fine ? take these drawable like drawer_list_lesector.xml,light_grey_color and light_pink_color to res/drawable folder – Arjun saini Sep 07 '16 at 09:20
they are in drawable folder – misha Sep 07 '16 at 10:55
See this answer... I don't know it's work but try to switch like that in drawable.....http://stackoverflow.com/questions/8114322/error-item-tag-requires-a-drawable-attribute-or-child-tag-defining-a-drawa/13047898#13047898 – Arjun saini Sep 07 '16 at 10:58
still nothing :/ it's working on pressed but not when it's selected – misha Sep 07 '16 at 11:05
See also this it's answer – Arjun saini Sep 07 '16 at 11:07
update your studio than http://tools.android.com/download/studio/builds/2-2-preview-7 – Arjun saini Sep 07 '16 at 11:10

score 0 · Answer 3 · answered Sep 07 '16 at 08:05

0

change:

app:itemBackground="@drawable/drawer_list_selector"

to:

app:itemBackground="@color/drawer_list_selector"

move the file drawer_list_selector.xml from /drawable/ folder to the /color/ folder (create one if it doesn't exist). now, change the drawer_list_selector to be a selector of colors:

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#F1E1F1" />
    <item android:state_selected="true" android:color="#F1E1F1"/>
    <item android:state_checked="true" android:color="#F1E1F1"/>
    <item android:state_focused="true" android:color="#F1E1F1"/>
    <item android:state_active="true" android:color="#F1E1F1"/>
    <item android:color="@android:color/transparent" />
 </selector>

answered Sep 07 '16 at 08:05

marmor

25,207
10
99
145

dear sir.... it 's giving an error.... Caused by: android.content.res.Resources$NotFoundException: File res/color/drawer_list_lesector.xml from drawable resource ID #0x7f0b0059 Binary Xml error with navigation... – Arjun saini Sep 07 '16 at 08:44
when I tried this this exception occurred "Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #3: tag requires a 'drawable' attribute or child tag defining a drawable " – misha Sep 07 '16 at 09:42
@Arjunsaini it's "drawer_list_selector", not "drawer_list_lesector". – marmor Sep 07 '16 at 11:17
@misha make sure you've put the selector in the color/ folder, not the drawable/ folder – marmor Sep 07 '16 at 11:19
I had in drawable but then I moved to color but changed code as you wrote but this exception occurred – misha Sep 07 '16 at 11:22
@marmor sir ya in my code i am saving with this name....so in logcat drawer_list_lesector – Arjun saini Sep 07 '16 at 11:24
according to this: http://stackoverflow.com/a/5295522/819355 it might be that the selector you reference must be a drawable-selector, not a color-selector, in that case, you can change back to your starting code, just change the default state from android:drawable="@android:color/transparent" to a shape with a color – marmor Sep 07 '16 at 11:42

Can't change selected item's background color in Navigation Drawer

3 Answers3