NavigationView of Material Design components

Today, let's take a look at the usage of NavigationView. NavigationView is a standard navigation menu, and its 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
Example
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#

Below are the common attributes of NavigationView, as follows:

<!--Menu popup 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 pays attention, they will tell you what color is used when clicking, what color is used when pressed, or some other effect. At this time, you need to set the text selection effect of 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 be smaller. Based on the experience of modifying the size of FloatingActionButton before, 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 found several dimen values related to Navigation by following the clues. Specifically, 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 modify 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, they will not be explained one by one. This way, the spacing between the menu icon and text is modified.

Example#

Below 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#

Below is the display effect, as shown in the following figure:

This concludes the introduction to NavigationView.