Usage and Problem Solving of NavigationView in Android

1. Basic Usage

1. The NavigationView is in the design library, add dependencies (the latest is 23.2.0）；

compile 'com.android.support:design:23.1.1' 

2. Then add a NavigationView in the DrawerLayout layout;

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
 android:id="@"+id/drawer_layout"
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <LinearLayout
   android:id="@"+id/main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <android.support.v7.widget.Toolbar
    android:id="@"+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark ActionBar"/>
   ......
  </LinearLayout>
 </FrameLayout>
 <android.support.design.widget.NavigationView
  android:id="@"+id/navigation"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  app:headerLayout="@layout/nav_header"
  app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>

Among them, attention should be paid to setting the android:layout_gravity="start" attribute for NavigationView.

3Then notice that NavigationView is actually divided into two parts, one is the header, and the other is the menu list below

As shown in the following figure:

Among them, the header is through app:headerLayout="@layout/nav_header" attribute added, the layout of nav_header is as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
 <ImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/nav_header_bg"
  android:scaleType="centerCrop"/>
 <ImageView
  android:layout_width="96dp"
  android:layout_height="96dp"
  android:layout_gravity="bottom"
  android:layout_marginBottom="36dp"
  android:padding="8dp"
  android:src="@drawable/ic_avatar"/>
 <TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  android:padding="16dp"
  android:text="Jaeger"
  android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</FrameLayout>

The following menu list part is a menu file, through app:menu="@menu/activity_main_drawer" attribute is added.

activity_main_drawer.xml file is located in the menu folder, its content is as follows:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 <group android:checkableBehavior="single">
  <item
   android:id="@"+id/nav_camera"
   android:icon="@drawable/ic_menu_camera"
   android:title="[#1#]"/>
  <item
   android:id="@"+id/nav_gallery"
   android:icon="@drawable/ic_menu_gallery"
   android:title="[#2#]"/>
  <item
   android:id="@"+id/nav_slideshow"
   android:icon="@drawable/ic_menu_slideshow"
   android:title="[#3#]"/>
  <item
   android:id="@"+id/nav_manage"
   android:icon="@drawable/ic_menu_manage"
   android:title="[#4#]"/>
 </group>
 <item android:title="[#5#]">
  <menu
   <item
    android:id="@"+id/nav_share"
    android:icon="@drawable/ic_menu_share"
    android:title="[#6#]"/>
   <item
    android:id="@"+id/nav_send"
    android:icon="@drawable/ic_menu_send"
    android:title="[#7#]"/>
  </menu>
 </item>
</menu>

4. Click event of the menu list

The click event setting code for the menu list is as follows:

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
   @Override
   public boolean onNavigationItemSelected(MenuItem item) {
    switch (item.getItemId()){
     case R.id.nav_personal_info:
      // do something
      break;
     ...
    }
    return false;
   }
  });

So far, the basic use of NavigationView is almost done, and the effect is as shown in the previous picture.

The following are the problems encountered during use and the solutions.

Part One: The menu icon color is rendered in other colors

NavigationView will render the icons in the menu according to the Android design specification by default, and render them in the color set by itemIconTint. If you do not set this attribute, it will be rendered in its default dark gray. If you don't want the icon color to be rendered, you can solve it with the following code:

   navigationView.setItemIconTintList(null);

Part Two: The spacing between the menu icon and text is too large

The spacing between the icon and text in the NavigationView menu is32dp, but it is usually different from the effect designed by our designers. In this case, you can set the following properties by rewriting them:

 <dimen name="design_navigation_icon_padding" tools:override="true">16dp</dimen>

Summary

That's all for this article. I hope the content of this article can be helpful to all Android developers. If you have any questions, you can leave comments for communication.