How to style the Design Support library's NavigationView?
Solution 1
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
Solution 2
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.
Frozen Crayon
Developer, gamer & writer My apps in Google Play: Word Unscramble Multi Calculator
Updated on June 27, 2022Comments
-
Frozen Crayon almost 2 years
So I'm using the NavigationView provided by Android Design Support Library
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
-
-
Frozen Crayon almost 9 yearsI put the xml under res/color but it says
Resources$NotFoundException: File res/color/drawer_menu_item.xml from drawable resource
-
Sash_KP almost 9 yearsPlease check my edit and lemme know if it worked for you.
-
geecko almost 9 yearsAdding drawables inside strings.xml .. Probably the best way to get yourself lost in your files :)
-
Sash_KP almost 9 years@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).
-
Frozen Crayon almost 9 years@Sash_KP I can't use drawable in
app:itemIconTint="@drawable/drawer_menu_item"
because it requires requires a 'android:color' attribute. -
Frozen Crayon almost 9 years@Sash_KP okay I dont know what I did wrong earlier but your first solution worked now.
-
android developer almost 9 yearsWill this affect the ripple effect color too?
-
Joop almost 9 yearsSetting the background color has no effect for me.
-
Lubos Mudrak almost 9 years@ArjunU. how did you solved your error ? I am getting the same error but only when setting itemBackground
-
Lubos Mudrak almost 9 yearsah
app:itemBackground
should be a drawable -
binaryKarmic over 8 years@Sash_KP Any idea on changing the list item height
-
Someone Somewhere almost 5 yearsI used this solution: stackoverflow.com/a/51633165/550471 worked very well