Android 5.0 MD Control Series (1) - Navigation View

After Android 5.0, Google launched a series of control libraries in the Material Design style, which are encapsulated in the Android Design Support Library. There are mainly the following controls:

NavigationView,  RecyclerView,   CardView,  NavigationView,
CoordinatorLayout,   CollapsingToolbarLayout,  TabLayout,  TextInputLayout,
SnackBar, FloatingActionButton,
Shadows,Ripples,BottomSheet,Palette,SwitchCompat Etc.

Next, I will summarize and sort out these controls in order to facilitate future use.

NavigationView

1. overview

Navigation View, as can be seen from its name, is a navigation function. Generally, Navigation View is used with Drawer Layout to achieve drawer navigation function.
Look at its inheritance relationship, which is inherited from FrameLayout. It was originally used as a layout.

Now many well-known applications have used this effect, such as QQ and Netease Cloud Music. Look at the results.

                       

How to introduce it?

Watching someone write is so cool, what do we need to do if he wants to introduce it into our own project?
Simply configure in Gradle of the project:
This method will introduce all the controls of md effect. If only some of them are used, it is not recommended to introduce them in this way. Whichever control should be used should be introduced.

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

Next is the specific use, in fact, it is very simple, we step by step to achieve this cool drawer effect.

2. use

First look at the effect map:
                       

In fact, both drawer effects should be used in conjunction with Drawer Layout, while Navigation View provides the way of header and menu layout, which is introduced into xml layout.

Let's first look at the overall layout:

activity_main.xml

<?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"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ToolbarTheme"/>
        <!--home Page layout-->
        <ImageView
            android:id="@+id/img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/header"/>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/menu_navigation"/>

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

Note the theme of Toolbar here
There are two key lines in the Navigation View layout:

    <!--Setting the header is usually a background image with some instructions-->
    app:headerLayout="@layout/header_layout"
    <!--Menu, Drawer Subject Content-->
    app:menu="@menu/menu_navigation"

Let's look at the header and menu layout:

header_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/header1">

    <ImageView
        android:id="@+id/pic"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="50dp"
        android:background="@drawable/dog"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/pic"
        android:layout_marginLeft="20dp"
        android:text="Qingqingzijin"
        android:textSize="30sp"
        android:textColor="@color/white"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="50dp"
        android:layout_marginBottom="20dp"
        android:text="Editor's Personal Signature"
        android:textSize="18sp"
        android:textColor="@color/white"/>
</RelativeLayout>

This layout is the head layout at the top of Navigation View. I roughly imitated the UI of QQ just to show the writing.
Now let's look at the menu, but the main layout of Navigation View:

<?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>
        <item
            android:id="@+id/vip"
            android:title="Understanding Membership Privileges"
            android:icon="@drawable/vip"
            android:checkable="true"
            app:showAsAction="always" />

        <item
            android:id="@+id/qq_money"
            android:title="QQ wallet"
            android:checkable="true"
            app:showAsAction="always"
            android:icon="@drawable/wallet"/>

        <item
            android:id="@+id/dress_up"
            android:title="Personality dress up"
            app:showAsAction="always"
            android:checkable="true"
            android:icon="@drawable/dress"/>

        <item
            android:id="@+id/my_save"
            android:title="My collection"
            app:showAsAction="always"
            android:checkable="true"
            android:icon="@drawable/collection"/>

        <item
            android:id="@+id/my_album"
            android:title="My album"
            app:showAsAction="always"
            android:checkable="true"
            android:icon="@drawable/album"/>

        <item
            android:id="@+id/my_file"
            android:title="My papers"
            app:showAsAction="always"
            android:checkable="true"
            android:icon="@drawable/file"/>
    </group>

    <item android:title="Other settings">
        <menu>
            <item
                android:checkable="true"
                android:icon="@drawable/settings"
                android:title="Set up"/>
            <item
                android:checkable="true"
                android:icon="@drawable/moon"
                android:title="night"/>
        </menu>
    </item>
</menu>

Grouping can achieve the effect of segmentation line.

Well, now there's only MainActivity left.

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private NavigationView mNavigationView;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        //ActionBarDrawer Toggle, which can realize the animation effect of the back button on Navigation View and Toolbar. Yes, the three-bar turns into an arrow.
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, mToolbar, 0, 0);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        if(Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            //Allow the application theme content to occupy the space of the system status bar
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            //Set the status bar color to transparent
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

        mNavigationView = (NavigationView) findViewById(R.id.navigation_menu);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        initLinsener();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        return super.onCreateOptionsMenu(menu);
    }

    private void initLinsener(){
        mNavigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {

                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        //Achieving Your Needs
                        return true;
                    }
                });
    }
}

Finished!

We often see another form of drawer as follows:

In fact, there are two points to be done:

1. Place toolbar outside Drawer Layout. The specific xml code is as follows:

<FrameLayout
    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.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ToolbarTheme"/>

    <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"
        android:layout_marginTop="?attr/actionBarSize"
        android:fitsSystemWindows="false">

        <ImageView
            android:id="@+id/img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/header"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/menu_navigation" />

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

2. If it's more than 5.0, we have to remove our settings for the 5.0 status bar in MainActivity, that is, remove the code:

if(Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            //Allow the application theme content to occupy the space of the system status bar
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            //Set the status bar color to transparent
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

Because of the time problem, there are still some details that are not perfect, such as:
How to adapt to 5.0 status bar immersion?
How to change the size of the Navigation View menu icon without changing the size of the image itself?
How to add the Footer Layout bottom layout?
How to change the color of the text selected in the sideslip menu?
Wait till next time to add it in.

Tags: Android DrawerLayout xml encoding

Posted on Thu, 11 Apr 2019 12:45:32 -0400 by juniorbisono