How to style the Design Support library's NavigationView?
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 hereapp:itemTextColor="@color/drawer_item" //and hereapp:itemBackground="@drawable/drawer_item"//and here for changing the background color of the item which is checked
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.