Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style the Design Support library's NavigationView?

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
like image 424
Frozen Crayon Avatar asked Jun 28 '15 08:06

Frozen Crayon


1 Answers

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 
like image 101
Sash_KP Avatar answered Sep 22 '22 13:09

Sash_KP