How to style the Design Support library's NavigationView?

Question

So I'm using the NavigationView provided by Android Design Support Library

enter image description here

I can't seem to find examples on how to style it.

So far I have:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    app:headerLayout="@layout/header"
    app:menu="@menu/drawer"
    app:itemTextColor="@color/black"
    app:itemIconTint="@color/black"/>

Styling the header is easy as its under its own xml layout but the body is a menu resource file and not a layout.

app:itemTextColor changes the text color
app:itemIconTint changes the icon color
app:itemBackground changes the item background color

So how to set

selected item background
selected item text color
selected item icon tint

score 45 · Accepted Answer · edited May 23 '17 at 12:24

45

I have answered to a similar question Here.

Basically what you need do is , 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>

For itemBackground, a separate drawable needs to be placed inside drawable folder too. The name is same drawer_item. android:drawable property needs to be set instead of android:color for itemBackground:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
       android:drawable="@drawable/shape_rectangle_checked"

        android:state_checked= "true" />
    <item android:drawable="@drawable/shape_rectangle" />

</selector>

File shape_rectangle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
<solid android:color="#ffffff" /> <!--white color -->
</shape>

File shape_rectangle_checked:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
<solid android:color="#25aaf1" /> <!--blue color -->
</shape>

and then set in your navigationview like this

app:itemIconTint="@color/drawer_item" //notice here
app:itemTextColor="@color/drawer_item" //and here
app:itemBackground="@drawable/drawer_item"//and here for changing the background color of the item which is checked

edited May 23 '17 at 12:24

Community

1
1

answered Jun 28 '15 at 09:05

Sash_KP

5,551
2
25
34

1

I put the xml under res/color but it says `Resources$NotFoundException: File res/color/drawer_menu_item.xml from drawable resource` – Frozen Crayon Jun 28 '15 at 17:44
Please check my edit and lemme know if it worked for you. – Sash_KP Jun 28 '15 at 19:57
1

Adding drawables inside strings.xml .. Probably the best way to get yourself lost in your files :) – geecko Jun 29 '15 at 20:43
@geecko : Agree. However in this case the original solution which works usually didn't work for OP. So i suggested another way or even another way (in the link given). – Sash_KP Jun 30 '15 at 04:26
@Sash_KP I can't use drawable in `app:itemIconTint="@drawable/drawer_menu_item"` because it requires requires a 'android:color' attribute. – Frozen Crayon Jun 30 '15 at 15:57
@Sash_KP okay I dont know what I did wrong earlier but your first solution worked now. – Frozen Crayon Jun 30 '15 at 16:03
1

Will this affect the ripple effect color too? – android developer Jul 13 '15 at 22:44
Setting the background color has no effect for me. – Joop Jul 22 '15 at 18:38
@ArjunU. how did you solved your error ? I am getting the same error but only when setting itemBackground – Lubos Mudrak Aug 04 '15 at 15:13
1

ah `app:itemBackground` should be a drawable – Lubos Mudrak Aug 04 '15 at 18:46
@Sash_KP Any idea on changing the list item height – binaryKarmic Feb 05 '16 at 10:45
I used this solution: https://stackoverflow.com/a/51633165/550471 worked very well – Someone Somewhere Jul 22 '19 at 22:23

score 3 · Answer 2 · edited Apr 15 '16 at 02:14

To expand on @Sash_KP's answer, for the xml in the drawable folder, you dont need the @drawable/shape_rectangle and @drawable/shape_rectangle_check. You can just use @color/your_color.

Also for API >= 21, I've noticed that the navigation menu items by default have a preset selector. You'll notice if you touch and hold down the menu item a ripple will appear. Using a custom itemBackground will not override the default ripple. Therefore if you use a ripple drawable it will create two ripples! Also menu items with ripple drawables do not allow you to have a pressed state for some reason (the default ripple will only appear if you HOLD down).

So for API >= 21 I would not recommend using a ripple drawable. Just use a regular selector drawable with no custom ripples.

How to style the Design Support library's NavigationView?

2 Answers2