Search code examples
androidmaterial-designandroid-support-libraryandroiddesignsupportnavigationview

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

Solution

  • 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