Use of Navigationdrawer in Android and animation effects when adding drawer toggle

Recently in the development of the app need to use the navigationdrawer, but in the animation (Hamburg icon and arrow icon to turn each other) the effect of the problem is always there, tossing for several hours finally fix. Here to share with you. Description, I developed the time to use the minsdkversion is 9, that is, the method described in this article applies to apilevel more than 2.3 of the situation, but if the minsdk higher than the words will be slightly different.

1. Effects and dependencies

Navigationdrawer is a kind of control that is respected in material design, NetEase news, know all have in use, first on:

The animation in the upper-left corner of the navigationdrawer when you open and close the image is implemented via a third-party library on GitHub, see: Https://github.com/ikimuhendis/LDrawer

But some time ago the official Android APPCOMPAT-V21 pack has begun to support this effect. If you're using Android studio, just add it in the app module's Build.gradle file

dependencies {    compile "com.android.support:appcompat-v7:21.0.+"}

then sync (sync) to use the AppCompat package. In addition, the project relies on the SUPPORT-V4 package, so please add this sentence in the dependencies:

Compile ' com.android.support:support-v4:22.0.0 '

2. Implementation steps

We illustrate this with an example of a mainactivity and a navigationdrawer pulled from the left. First define a toolbar.xml below the layout folder and define the toolbar style.

Toolbar.xml:

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.v7.widget.toolbar     xmlns:android= "/http Schemas.android.com/apk/res/android "    xmlns:app=" Http://schemas.android.com/apk/res-auto "    android:id=" @ +id/toolbar "    app:theme=" @style/themeoverlay.appcompat.actionbar "    android:layout_width=" Match_parent "    android:layout_height= "wrap_content"    android:minheight= "? attr/actionbarsize"    android:background= " ? attr/colorprimary "/>

Toolbar is a control introduced in API21 (Android 5.0), toolbar is later used to replace Actionbar, because toolbar can set the style more freely. Because the Min API is now only 9, you need to use the toolbar in the support package.

Then define the main layout main_layout.xml file:

<linearlayout    xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:id=" @+id/main_parent_view "    android:layout_width=" Match_parent    " android:layout_height= "Match_parent"    android:orientation= "vertical" >    <!--This introduces the toolbar just defined--    <include layout= "@layout/toolbar"/>    <android.support.v4.widget.drawerlayout        android:id= "@ +id/drawer_layout "        android:layout_width=" match_parent "<pre name=" code "class=" plain "> Actionbaractivity

android:layout_height= "Match_parent" > <!--Main layout, where mainactivity is on the side and <framelayout Android:id = "@+id/main_fragment_container" android:layout_width= "match_parent" android:layout_height= "Match_parent"/> <!--Navigation Drawer--
<!--note Here Layout_width is generally set to be less than the width of the screen, that is, the width of navigationdrawer display time, drawer out when the whole screen is not very good-looking
<listview android:id= "@+id/listview_drawer" android:layout_width= "@dimen/drawer_width" android:layout_height= " Match_parent "android:layout_gravity=" Left|start "/> </android.support.v4.widget.drawerlayout></ Linearlayout>

You can see here on the top of the Drawerlayout add the layout of the toolbar just defined, and drawerlayout inside is divided into two parts, the above framelayout inside the contents of the mainactivity when it was stored, The bottom part, which is the ListView, is the content that is displayed when the Navigationdrawer is opened.

And remember that the main activity is going to inherit

Actionbaractivity

Next, in the main activity Findviewbyid find the toolbar and Navigationdrawer instances, assuming that the instance name is Mtoolbar and Mdrawerlayout, and then add the listener:

Setsupportactionbar (Mtoolbar); mdrawertoggle= New Actionbardrawertoggle (This, Mdrawerlayout,mtoolbar, R.string.app_ Name, r.string.app_name); Mdrawerlayout.setdrawerlistener (Mdrawertoggle);

There are also some menu menus and the status of the Drawertoggle need to be changed:

 @Overridepublic boolean Oncreateoptionsmenu (Menu menu) {menuinflater inflater = new Me    Nuinflater (this);    Inflater.inflate (R.menu.menu_main,menu); return true;}        @Overridepublic boolean onoptionsitemselected (MenuItem item) {if (mdrawertoggle.onoptionsitemselected (item)) {    return true; } return super.onoptionsitemselected (item);}    @Overrideprotected void Onpostcreate (Bundle savedinstancestate) {super.onpostcreate (savedinstancestate); Mdrawertoggle.syncstate ();}    @Overridepublic void onconfigurationchanged (Configuration newconfig) {super.onconfigurationchanged (newconfig); Mdrawertoggle.onconfigurationchanged (newconfig);} @Overridepublic void onbackpressed () {if (Mdrawerlayout.isdraweropen (gravity.start|        Gravity.left)) {mdrawerlayout.closedrawers ();    Return } super.onbackpressed ();} 

Toolbar has been successfully displayed, open and close the Navigationdrawer icon on the left is also able to switch normally. But there is a problem: toolbar is displayed under the original Actionbar, this time running the program, it is possible to find that the original activity Actionbar did not disappear, and the new toolbar display in the original Actionbar below, It looks like there are two of actionbar. Don't panic, we just need to add a few attributes to the activity's theme or style:

         <!--this line to prevent possible exceptions: Java.lang.IllegalStateException:This Activity already has a action bar supplied by the window de Cor. Do not request Window.feature_action_bar and set Windowactionbar to False in your theme to use a Toolbar instead. --         <item name= "Windowactionbar" >false</item>         <!-- The Windowactionmodeoverlay property is set so that toolbar overlap on the actionbar and cover it; High version please use the third line, the lower version please use the second line--        <item name= "Android: Windowactionbaroverlay ">true</item>        <item name=" Windowactionmodeoverlay ">true</item>

And then recompile the run project, is not found two actionbar only one left!

If the minsdkversion is relatively high, much of the space above can be used without the support package.

3. Reference documents:

①appcompat-v21

②https://developer.android.com/training/basics/actionbar/overlaying.html

③http://stackoverflow.com/questions/26818157/actionbardrawertoggle-animation

Use of Navigationdrawer in Android and animation effects when adding drawer toggle