Quick build of the Android sliding navigation menu (ii) Material Design

Original articles, reproduced please specify (from: http://blog.csdn.net/leejizhou/article/details/52046748 Li Zizhou blog)

The previous article http://blog.csdn.net/leejizhou/article/details/52013343 introduced the quick construction of several sliding navigation menu effects, this article summarizes the "present" How to design the sliding navigation menu according to the design criteria of Android, why do I say "now"? Because this design standard is going to change.

Before material design, the official standard for sliding navigation menus was the same.

* Images from http://www.androiduipatterns.com/2014/10/navigation-drawer-where-does-it-belong.html

The sliding navigation menu needs to be under Actionbar (Toolbar), which is a more common design in the Android 4.X era, and is also the design standard for Android designs at the time.

Over time, in the Android 5.0 era, Google has brought material design, the new style changes relatively large, of course, the sliding navigation menu design standards have changed, the following is the latest official sliding navigation menu design documents.

In the new standardized design, the sliding navigation menu jumps to the top of all the interfaces, which is quite different from the previous design.

The new sliding navigation menu structure is finished, then look at the official design standard layout style

The picture may be somewhat small, website address: https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs

When you see this precision to the pixel level of design standards, I believe you also want to gas off the page, fortunately, Android gave me a call Navigationview this layout container, we can quickly implement the standard design of the sliding navigation menu bar, This is also the main use of Navigationview, when new technologies are present, we need not only to use them, but also to understand why we use them.

Of course Navigationview how to use has been everywhere, for the integrity of the article I still put some major implementation code it.

Navigationview is used in conjunction with Drawlayout, the previous chapter describes the Drawlayout use the menu layout in the example to Navigationview is OK.

Here is the implementation step

1 because Navigationview in the design library, you need to add dependencies

‘com.android.support:design:24.0.0‘

2 adding Navigationview to Drawlayout

Layout

<android. Support. V4. Widgets. DrawerlayoutXmlns: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:id="@+id/drawerlayout"Android:fitssystemwindows="true"> <linearlayout android:id="@+id/ll_main"Android:layout_width="Match_parent"android:layout_height="Match_parent"android:orientation="Vertical"> <android. Support. V7. Widgets. ToolbarAndroid: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> <android. Support. Design. Widgets. NavigationviewAndroid:id="@+id/navigationview"Android:layout_width="Wrap_content"android:layout_height="Match_parent"android:layout_gravity="Start"app:headerlayout="@layout/nv_header"app:menu="@menu/main_drawer"/></android. Support. V4. Widgets. Drawerlayout>

Because it belongs to the Drawlayout navigation menu layout, Navigationview to add android:layout_gravity= "start" means to slide from the left, and vice versa is "end".
One of the app:headerlayout= "@layout/nv_header" needs to pass in the head layout of a navigation menu, which functions as a green-box part.

Layout/nv_header.xml

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:layout_width  =" match_parent " android:layout_height  =" 180DP " android:background  = "@drawable/background_material " android:orientation  =" vertical " Span class= "Hljs-attribute" >android:gravity  = "bottom"  android:padding  =" 16DP ";     <linearlayout  android: Layout_width  = "match_parent"  android:layout_ MarginTop  = "8DP"  android:layout_height  = "0DP"  android:layout_weight  = "1"  android:gravity  = " Center_vertical ";     <ImageViewandroid:id= "@+id/profile_image"android:layout_width=" 76DP "android:layout_height=" 76DP "android:background=" @drawable/z " / >                                    </linearlayout>    <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:text  = "Lijizhou"  android:textsize  =" 14sp " android:textcolor  =" #FFF "  android:textstyle  = "bold"  android:paddingbottom  = "4DP" />     <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="http://www.lijizhou.com"android:textsize="14sp"android: TextColor="#fff" />                                        </linearlayout>

app:menu= "@menu/main_drawer" is used to set the menu portion of the navigation menu in the Green box.

Menu/main_drawer.xml

<?xml version= "1.0" encoding= "Utf-8"?><menu xmlns:android="Http://schemas.android.com/apk/res/android">    <group>        <item android:id= "@+id/navigation_item1"android:checkable=" True "android:title=" XXXX "android:icon=" @mipmap/ic_launcher "/ >                                            <item  android:id  =             "@+id/navigation_item2"  android:checkable  = "true"  android:title  =" XXXX " android:ico n  = "@mipmap/ic_launcher" />         <item  android:id  =             "@+id/navigation_item3"  android:checkable  = "true"  android:title  =" XXXX " android:ico n  = "@mipmap/ic_launcher" />         <item android:id="@+id/navigation_item4"android:checkable="true"  android:title="XXXX"android:icon="@mipmap/ic_launcher"/>                                            <item android:id= "@+id/navigation_sub"android:title=" Other ">                <menu>            <item  android:id  =                 "@+id/navigation_sub_item1"  android:checkable  = "true"  android:title  =" xxxx " and Roid:icon  = "@mipmap/ic_launcher" />             <item  android:id  =                 "@+id/navigation_sub_item2"  android:checkable  = "true"  android:title  =" xxxx " and Roid:icon  = "@mipmap/ic_launcher" />             <item android:id= "@+id/navigation_sub_item3"android:checkable=" True "android:title=" xxxx "android:icon=" @mipmap/ic_launcher "/>                                                        </Menu>    </Item>    </Group></Menu>

3 Finally the code implementation in Java

/** * Created by www.lijizhou.com on 2016/7/23. * Navigationview Sample */ Public  class navigationviewactivity extends appcompatactivity {    PrivateDrawerlayout drawerlayout;PrivateToolbar Toolbar;PrivateNavigationview Navigationview;@Override    protected void onCreate(@Nullable Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Setcontentview (R.layout.activity_navigationview);if(Build.VERSION.SDK_INT > Build.version_codes. KITKAT) {//Transparent status barGetWindow (). Addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        } setsupportactionbar (toolbar= (Toolbar) Findviewbyid (R.id.toolbar));        drawerlayout= (drawerlayout) Findviewbyid (r.id.drawerlayout);        Navigationview = (Navigationview) Findviewbyid (R.id.navigationview); Actionbardrawertoggle actionbardrawertoggle=NewActionbardrawertoggle ( This, drawerlayout,toolbar,r.string.open,r.string.close);        Actionbardrawertoggle.syncstate (); Drawerlayout.adddrawerlistener (Actionbardrawertoggle);//Navigationview menu tap to listenNavigationview.setnavigationitemselectedlistener (NewNavigationview.onnavigationitemselectedlistener () {@Override             Public Boolean onnavigationitemselected(MenuItem MenuItem) {Selectdraweritem (MenuItem);return true;    }        }); } Public void  Selectdraweritem(MenuItem MenuItem) {Switch(Menuitem.getitemid ()) {// ...           default: Toast.maketext (navigationviewactivity. This,"Menu click", Toast.length_short). Show (); Break; } menuitem.setchecked (true);    Drawerlayout.closedrawers (); }}

The following code and layout code in the android:fitssystemwindows= "true" play the role of a translucent status bar, translucent status bar (not called immersion) effect has a variety of implementations, Google has not been able to give a good way to implement, Follow-up may consider writing a comprehensive understanding of the transparency of the effect of the article, there is no more introduction.

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {            //透明状态栏                   getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        }

OK This article introduces Google's latest sliding navigation menu design standards, but also welcome you in the bottom of the message and point to the left corner of the attention, thank you.

Source code: Https://github.com/lijizhou/SlidingLayoutSample

Quick build of the Android sliding navigation menu (ii) Material Design