Introduction to Material Design Android Official Controls

NavigationView

• The NavigationView is used for DrawerLayout's second sublayout, the drawer layout
• Controls provided by google have the same status as inearLayout in DrawerLayout
• Of course, you can use other layouts (such as FrameLayout+Fragment) as drawer layouts instead of NavigationView

Import design Library

'com.android.support:design:26.1.0'

Simple use

xml

 <android.support.v4.widget.DrawerLayout
        ......>

        <!--First, the layout of the display-->
        <android.support.design.widget.CoordinatorLayout
            ......>
        </android.support.design.widget.CoordinatorLayout>


        <!--Second, not shown drawer layout-->
        <android.support.design.widget.NavigationView
            android:id="@+id/NavigationView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/header_layout"
            app:menu="@menu/menu_navigation_view"
            app:itemBackground="@drawable/color_nav_item_background"
            app:itemTextColor="@color/color_nav_item_text"
            app:itemIconTint="@color/color_nav_item_text"
            app:itemTextAppearance="@style/NavItemAppearance"
        />


    </android.support.v4.widget.DrawerLayout>

app:headerLayout: Head layout

<?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="200dp"
               >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/timg"/>
    <TextView
        android:id="@+id/tv_header_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="8dp"
        android:textColor="#cdcdcd"
        android:text="Navigation"
        android:textSize="28sp"
    />
</FrameLayout>

• Get the header layout and its subviews in code

        View headerView = mNavigationView.getHeaderView(0);
        TextView mTextView = (TextView) headerView.findViewById(R.id.tv_header_title);
        mTextView.setText("NavigationView");

app:menu: Describe the layout of the lower half

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Photograph"/>
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Album"/>
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="video"/>
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="tool"/>

    </group>

    <item android:title="contact">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="share"/>
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send out"/>
        </menu>
    </item>
</menu>

• Similar to listview
• Set each item click event in the code

 mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //Handle item click events here

                switch(item.getItemId()){
                    case R.id.nav_camera:
                        Snackbar.make(mNavigationView,"Photograph", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_gallery:
                        Snackbar.make(mNavigationView,"Album", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_slideshow:
                        Snackbar.make(mNavigationView,"video", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_manage:
                        Snackbar.make(mNavigationView,"tool", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_share:
                        Snackbar.make(mNavigationView,"share", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_send:
                        Snackbar.make(mNavigationView,"Send out", Snackbar.LENGTH_LONG).show();
                        break;
                }
                mDrawerLayout.closeDrawer(Gravity.LEFT);
                return true;
            }
        });

• app:itemIconTint="@color/blue": the item icon mask is gray by default, so the pictures are gray;
• Pictures turn gray and need to be in primary color

 navigationView.setItemIconTintList(null);  //Display color

• app:itemTextColor=""Set text color for normal item"
• app:itemTextAppearance="@style/NavItemAppearance": Set normal item Text format
• app:itemBackground="@color/colorAccent": Set the background color for each item
• item Click/Select Color Change

app:itemBackground="@drawable/color_nav_item_background"
app:itemTextColor="@color/color_nav_item_text"
app:itemIconTint="@color/color_nav_item_text"

selector format: state_checked: checked; state_pressed:click

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2266cc" android:state_checked="true"></item>
    <item android:color="#454545" ></item>
</selector>

• app:insetForeground="#40000000": Set the shading color for the mask
• item sets the group before the split line appears

Source address: https://github.com/LinweiJ/MaterialDesignWidget