Android Material design new UI controls using the Daquan one

Preface

Since Google introduced a new design specification at the IO conference in 2014, the overall aesthetics of Android app has improved a great Material Design level, Android is no longer a black and ugly interface, instead of a rich color, beautiful buttons, good user experience; But at first, this design code can only be run on Android 5.0 or more mobile phones, resulting in developers are only to experience, in the country and not a wide range of promotion, the quality of the app can not be greatly improved, but as a change of the world Google Company soon introduced a compatibility library Android Material Design, this is definitely the industry's conscience, we also see more and more apps are starting to use this compatibility library to improve the UI effect and user experience, because before only occasionally experience, and do not seriously understand the use, Lead to the use of this library Mengmengdongdong, now write down this summary, but also is an account of their own, but also a summary of knowledge, if you can help others, let others less detours, it is better;

Let's take a look at the Evernote first and have a general idea

How to use

If you use this compatibility library, you only need to add it to the project dependencies:

Compile ' com.android.support:design:23.2.1 '

In this case, Android Studio will automatically sync this library, and then we can use happily, I believe some old drivers with this is simply too simple;

1 Slide Navigationview

In Materil design, navigationview as a drawer navigation to achieve the internal interaction of the app, make the implementation more simple, but also directly through the menu resource elements directly generated navigation elements;

Its general usage is to match the previous V4 package, and as the darwer part of it, that is, the outline DrawLayout of the Navigation section, which provides an optional header, default style, highlighting, grouping, grouping, sub-headings, etc., shown on the left is NavigationView :

Let's take a look at how it's used, the outer layer is a drawerlayout, the first child will serve as the home page content, and the second child as the drawer side ramen board:

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.v4.widget.drawerlayout android:id= "@+id/drawer_    Laout "xmlns:android=" http://schemas.android.com/apk/res/android "xmlns:tools=" Http://schemas.android.com/tools " Android:layout_width= "Match_parent" android:layout_height= "match_parent" xmlns:app= "http://schemas.android.com/ Apk/res-auto "tools:context=". Navigationviewactivity "><linearlayout android:orientation=" vertical "android:layout_width=" wrap_content "an droid:layout_height= "Wrap_content" > <include layout= "@layout/toolbar_actionbar"/> <textview Andro id:layout_gravity= "center" android:layout_margintop= "100DP" android:textsize= "25SP" Android:layout_wi Dth= "Wrap_content" android:layout_height= "wrap_content" android:text= "This is home content"/></linearl ayout> <android.support.design.widget.navigationview android:id= "@+id/navi_all" Android:layout_widt H= "WRap_content "android:layout_height=" match_parent "android:layout_gravity=" Start "app:headerlayout=" @l Ayout/head_layout "app:menu=" @menu/navigation_menu "> </android.support.design.widget.navigationview>&lt ;/android.support.v4.widget.drawerlayout>

* * NOTE: * * We see that Navigationview has two properties, ' App:headerlayout ' accepts a layout file, as the header layout of the navigation page, optional; ' App:menu ' accepts a menu, as the navigation bar, This is a required option; Headerlayout is a normal layout file, we are not repeating, we will now look at the menu file how to write, in the ' res ' directory to create a new ' menu ' folder, and then create a new XML file:

<?xml version= "1.0" encoding= "Utf-8"? ><menu xmlns:android= "Http://schemas.android.com/apk/res/android" >    <group android:checkablebehavior= "single" >        <item            android:id= "@+id/navi_home"            android:icon= "@mipmap/            Home" android:checked= "true"            android:title= "first"/>        <item            android:id = "@+id/navi_notify"            android:icon= "@mipmap/notify"            android:title= "Notifications" >        </item>        < Item            android:id= "@+id/navi_blog"            android:icon= "@mipmap/blog"            android:title= "my blog"/>    </group></menu>

Note: the item checked= "True" will be highlighted, which allows the user to know which menu item is currently selected. Of course, the selected state of item can be set in the code;

Use Subheader to group menus:

<item    android:id= "@+id/navigation_subheader"    android:title= "@string/navigation_subheader" >    <menu>        <item            android:id= "@+id/navigation_sub_item_1"            android:icon= "@drawable/ic_android"            android:title= "@string/navigation_sub_item_1"/>        <item            android:id= "@+id/navigation_sub_item_ 2 "            android:icon=" @drawable/ic_android "            android:title=" @string/navigation_sub_item_2 "/>    </ Menu></item>

Finally, the Click event in the menu we want to write, NavigationView gives us a setNavigationItemSelectedListener way to set a callback when a menu item is clicked, and OnNavigationItemSelectedListener gives us a click MenuItem , where we can handle the click event, change the status of item, Update the interface status, close the navigation bar and other operations;

Mnavigationview.setnavigationitemselectedlistener (New Navigationview.onnavigationitemselectedlistener () {    @ Override Public    Boolean onnavigationitemselected (MenuItem item) {        switch (Item.getitemid ()) {            case R.id.navi_blog:                toast.maketext (navigationviewactivity.this, "blog", Toast.length_short). Show ();                break;            Case R.id.navi_home:                toast.maketext (Navigationviewactivity.this, "Home", Toast.length_short). Show ();                break;            Case r.id.navi_notify:                toast.maketext (Navigationviewactivity.this, "notify", Toast.length_short). Show ();                break;        }        Item.setchecked (true);        Mdrawerlayout.closedrawer (gravity.left);//outer drawerlayout        return false;    });

2.TextInputLayout EditText to enhance user experience

When we used EditText, we used a hint property, but when the user entered it, the value of the hint property was emptied, but in the Material Design , Google gave us another TextInputLayout to optimize our user experience, when the focus input was taken, The value of the hint automatically shrinks and runs to the top of the input field, with the effect shown:

Of course, the use is also very simple:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:tools=" Http://schemas.android.com/tools "android:layout_width=" Match_parent "android:layout_height = "Match_parent" android:orientation= "vertical" tools:context= "com.suericze.myapplication.TestInput" > <andro Id.support.design.widget.TextInputLayout android:layout_width= "match_parent" android:layout_height= "Wrap_con Tent "> <edittext android:layout_width=" match_parent "android:layout_height=" Wrap_conten T "android:hint=" username/mobile number "/> </android.support.design.widget.TextInputLayout> <android.support . Design.widget.TextInputLayout android:layout_margintop= "20DP" android:layout_width= "Match_parent" an droid:layout_height= "Wrap_content" > <edittext android:layout_width= "match_parent" Andro id:layout_height= "Wrap_content"           Android:inputtype= "Textpassword" android:hint= "password"/> </android.support.design.widget.textin Putlayout></linearlayout>

Note: The color of the textinputlayout comes from the color of the coloraccent in the style, and in addition to displaying the hint, you can also display an error message under EditText by calling SetError ().

3. Suspension Operation Button Floatingactionbutton

See literally is the hover button, is responsible for the display interface basic operation of the circular button, it implements a default color for the theme of the Coloraccent hover button, it is a shadow with a circular button, you can change its size by fabsize, with the following properties:

• The default color is coloraccent color value, you can change the background color by App:backgroundtint property or setbackgroundtintlist (Colorstatelist tint) method.
• Change size: By setting the App:fabsize property (mini or normal)
• ANDROID:SRC Change drawable
• App:ripplecolor set the color when clicked (water ripple effect)
• App:borderwidth setting the border width of a button
• App:elevation setting the depth of the normal shadow State (default 6DP)
• App:pressedtranslationz Setting the shadow depth of the click State (Default 12DP)

Usage:

<android.support.design.widget.floatingactionbutton    android:layout_width= "Wrap_content"    android: layout_height= "Wrap_content"    android:layout_margin= "20DP"    android:layout_alignparentbottom= "true"    Android:layout_alignparentright= "true"    android:src= "@mipmap/add"    app:ripplecolor= "#ff0000"    app: Borderwidth= "3DP"    app:fabsize= "normal"    />

The implementation results are as follows:

4 Bottom Snackbar

Snackbar provides a friendly feedback to the user by presenting a concise message at the bottom of the screen, using a toast, except that the first parameter does not require a context but is attached to the parent view, and only one snackbar can be displayed at the same time. At the same time can provide the user with an action action, the user can be deleted before it disappears; The simplest usage:


Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show();


Let's see:

OK, let's take a look at how the Snackbar with action is used,

Snackbar.make (Mrelativelayout, "snackbarclicked", Snackbar.length_short). Setaction ("Test", new View.onclicklistener () {            @Override public            void OnClick (View v) {                toast.maketext (testinput.this, "Clicked ", Toast.length_short). Show ();            }        }). Show ();

Here we give snackbar an action, when we click Test , will pop up toast, the effect is as follows:

OK, we have a certain understanding of the use of some controls, we will introduce the use of appbarlayout,collapsingtoolbarlayout,tablayout in the next chapter, May everyone have a good life ....

Android Material design new UI controls using the Daquan one