NavigationView of Material Design Components

Today, let's take a look at the usage of NavigationView. NavigationView is a standard navigation menu whose menu content is filled by a menu resource file. NavigationView is generally used in conjunction with DrawerLayout to create a drawer menu, consisting of a content page and a menu page. The main content is as follows:

Basic layout
Common attributes
Text selection effect
Icon and text spacing
Case study
Display effect

Basic layout#

You can directly use DrawerLayout as the root layout, with the content layout and menu layout inside. Remember that the content layout must be placed before the menu layout. You can understand that when the menu is pulled out, it should be above the content layout. If the order is reversed, it will affect the click event of the menu item and the sliding hide of the menu. Of course, if there is a Toolbar, you can add it to the content layout as needed, or outside the DrawerLayout. The only difference is whether the side menu covers the Toolbar. The basic usage is as follows:

 <android.support.v4.widget.DrawerLayout  
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true">
     
     <!--Content -->
     
     <!--Menu-->
     <android.support.design.widget.NavigationView
         android:id="@+id/navigation"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </android.support.v4.widget.DrawerLayout>

Common attributes#

The following are the common attributes of NavigationView:

<!--Menu pop-up direction-->
android:layout_gravity="start"
<!--Color of menu icon rendering-->
app:itemIconTint="@color/colorPrimary"
<!--Color of menu text-->
app:itemTextColor="@color/colorNormal"
<!--Background color of menu items (with spacing between groups)-->
app:itemBackground="@color/colorBackground"
<!--Menu items-->
app:menu="@menu/menu_navigation_view" 
<!--Header layout of NavigationView-->
app:headerLayout="@layout/head_navigation_layout"

Text selection effect#

If the designer is attentive, they will tell you the color when clicked, the color when pressed, or some other effect. At this time, you need to set the text selection effect for the menu item. Here, we choose to create a color resource file to implement the text selection effect. Define the color resource file as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Pressed-->
    <item android:color="@color/colorPress" android:state_pressed="true"/>
    <!--Selected-->
    <item android:color="@color/colorCheck" android:state_checked="true"/>
    <!--Default-->
    <item android:color="@color/colorNormal"/>
</selector>

Then, set the itemTextColor attribute of NavigationView, as follows:

<!--Set the color of menu items-->
app:itemTextColor="@color/select_color_navigation"

Of course, you can also set it in code, as follows:

//Set the color of menu items
ColorStateList colorStateList = getResources().getColorStateList(R.color.select_color_navigation);
navigationView.setItemTextColor(colorStateList);

Then, set the event listener for the selected NavigationView menu item, as follows:

navigationView.setNavigationItemSelectedListener(this);

Finally, when the selection is completed, set the menu item as selected, as follows:

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    switch (item.getItemId()){
        case R.id.menu1:
            Toast.makeText(this,"menu1",Toast.LENGTH_SHORT).show();
            break;
        //...
    }
    //Set the menu item as selected
    item.setCheckable(true);
    //Close the Drawer
//    navDrawLayout.closeDrawers();
    return true;
}

Icon and text spacing#

After using NavigationView, it is found that there is a certain spacing between the menu icon and the menu text, which looks a bit wide. For those with a bit of OCD, it must be slightly modified to make it smaller. Based on the experience of modifying the size of FloatingActionButton, we can look for the position to set this spacing by flipping through the source code. By checking the NavigationView source code, we finally found the relevant dimen values in NavigationMenuPresenter. Then, we traced back to several dimen values related to Navigation. They are as follows:

public static final int design_navigation_elevation = 0x7f060064;
public static final int design_navigation_icon_padding = 0x7f060065;
public static final int design_navigation_icon_size = 0x7f060066;
public static final int design_navigation_max_width = 0x7f060067;
public static final int design_navigation_padding_bottom = 0x7f060068;
public static final int design_navigation_separator_vertical_padding = 0x7f060069;

At this point, create the same-named values in the project's dimens folder to override them. Here, we are modifying the spacing between the menu icon and text, so we only need to set:

<!--Modify the spacing between the menu icon and text in NavigationView-->
<dimen name="design_navigation_icon_padding" tools:override="true">10dp</dimen>

As for other related dimen values, I won't explain them one by one. This way, the spacing between the menu icon and text is modified.

Case study#

Here is an example of using NavigationView in conjunction with DrawerLayout. The layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical">
    <!--ToolBar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/navToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/navDrawLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--Content-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="@string/app_name"
                android:textSize="18sp" />
        </LinearLayout>
        <!--Menu-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigationView"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/head_navigation_layout"
            app:itemIconTint="@color/colorPrimary"
            app:itemTextColor="@color/select_color_navigation"
            app:menu="@menu/menu_navigation_view" />
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

Display effect#

The following is the display effect, as shown in the figure below:

The introduction of NavigationView ends here.