Android Development with material design style drawer layout

Source: Internet
Author: User

In the implementation of development requirements, it is necessary to use a drawer layout, similar to the QQ5.0 side-by-side menu, implemented in many ways, you can customize the control, you can also use the third-party open Source Library.

The same google also launched its own slide-off component--drawlayout, the use of the way is very simple, with the toolbar has a different sliding effect, so recommend everyone to use.

Is it more interactive and more cool?

* * First is xml**

Drawlayout is divided into two parts: the side-by-side interface and the content interface, so there should be two layouts in Drawlayout, set properties in the slide-by layout:Android: layout_gravity="Start" , you can achieve a slippery slide.

The following is an XML file, for reference only:

<?XML version= "1.0" encoding= "Utf-8"?><Android. Support.v4.widget.DrawerLayout android:layout_width= "Match_parent"Android:layout_height= "Match_parent"xmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:app= "Http://schemas.android.com/apk/res-auto"Android:id= "@+id/dl_content">    <LinearLayoutAndroid:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical"Android:id= "@+id/ll_content">        <Android. Support.design.widget.CoordinatorLayout android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:id= "@+id/cl_content">            <includeLayout= "@layout/head_home"/>        </Android.support.design.widget.CoordinatorLayout>       <FramelayoutAndroid:layout_width= "Match_parent"Android:layout_height= "0DP"Android:layout_weight= "1"Android:id= "@+id/fl_content"></Framelayout>        <Android. Support.v4.app.FragmentTabHost android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"App:layout_scrollflags= "Scroll|enteralways"Android:id= "@+id/ft_host">        </Android.support.v4.app.FragmentTabHost>    </LinearLayout>    <Android. Support.design.widget.NavigationView Android:id= "@+id/nv_left_content"Android:layout_width= "Wrap_content"Android:layout_height= "Match_parent"android:layout_gravity= "Start"App:itemicontint= "#333"App:itemtextcolor= "#333"App:headerlayout= "@layout/left_home_top"App:menu= "@menu/left_home_botton"        /></Android.support.v4.widget.DrawerLayout>

* * Code SECTION * *

The next step is to get toolbar and drawlayout connected. This part is also very simple. Let toolbar replace Actionbar. Here is a point of attention, can not let the activity to inherit activity, but inherit from its subclass appcompatactivity, otherwise cannot find Setsupportactionbar (toolbar) This method, when we are connected, we can use the actionbardrawertoggle , it implements the

Drawlayout's sliding monitoring, Google also associated it with material design-style animation effects.

When we achieve this step, let's look at the effect:

Can be found that the button is blocked, if you have used the Evernote client, you will find that its slide-off button is also blocked, so not cool at all!!!!!

But as a perfect bug-free Android developer, this is definitely not allowed.

* * Rewrite ondrawerslide* *

By rewriting the Ondrawerslide method to regain the sliding range, let him stick to the content interface underline. The code is simple, and the main code is posted here:

    Private voidInitview () {Setsupportactionbar (toolbar); Drawertoggle=NewActionbardrawertoggle ( This, Drawerlayout,toolbar, R.string.open,r.string.close) {@Override Public voidOndrawerslide (View Drawerview,floatSlideoffset) {WindowManager WindowManager=(WindowManager) Getsystemservice (Getapplicationcontext ().                Window_service); Display Display=Windowmanager.getdefaultdisplay (); Linearlayout.layout (Navigationview.getright (),0, Display.getwidth ()+navigationview.getright (), Display.getheight ()); Super. Ondrawerslide (Drawerview, Slideoffset);        }        };        Drawerlayout.setdrawerlistener (Drawertoggle); Getsupportactionbar (). sethomebuttonenabled (true); Getsupportactionbar (). setdisplayhomeasupenabled (true); } @Override Public voidonpostcreate (Bundle savedinstancestate) {Super. Onpostcreate (savedinstancestate);    Drawertoggle.syncstate (); } @Override Public voidonconfigurationchanged (Configuration newconfig) {Super. onconfigurationchanged (Newconfig);    Drawertoggle.onconfigurationchanged (Newconfig); }

The end is the beginning of the effect, is not very cool, the user experience is more than the traditional side-slip better. Finally thanks for browsing, I will continue to refuel!

Android Development with material design style drawer layout

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.