Android Material Design A

I. Overview

At the 2015 IO Conference, Google brought us a more detailed design specification for material, and also brought us a brand new Android Support Library, in this Support Google provides us with a more standardized MD design-style control. Most importantly, the Android design Support Library is more compatible and can be directly backward-compatible to Android 2.2. This has to be said to be a conscientious work.

Using the support library is very simple:
You can add a reference:

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

Let's take a look at the basics of how these new controls are used, and let's start with the simplest controls.

Some of the content comes directly from the Android Developer blog:
English Original:
Http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

Translation of pineapple:
Http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

the use of 1.Snackbar:
Snackbar provides a lightweight control between toast and alertdialog that provides prompt and action feedback for messages.
The use of Snackbar is essentially the same as the use of toast:

Snackbar.make (View, "Snackbar comes Out", Snackbar.length_long)
                        . Setaction ("Action", new View.onclicklistener () {
                            @Override public
                            void OnClick (View v) {
                                toast.maketext (
                                        mainactivity.this,
                                        "Toast comes Out",
                                        toast.length_short). Show ();
                            }
                        }. Show ();                        

Note that here we take the first argument as the base element for Snackbar, and the set action can be set more than one.

The effect shown is similar to the following:

Snackbar will disappear after a certain time, which is exactly the same as toast.

Google API Doc Official Description:

Http://developer.android.com/reference/android/support/design/widget/Snackbar.html

use of 2.TextInputLayout controls:
Textinputlayout as a parent container control, wrapping the new edittext. Typically, a separate edittext hides hint prompts after the user enters the first letter, but now you can use Textinputlayout to encapsulate the edittext, prompting the message to become a edittext that appears above floating Label so that the user always knows what they are typing now. At the same time, if you add edittext to the monitor, you can add more floating label to it.

Now let's look at this with a textinputlayout:

<android.support.design.widget.textinputlayout
        android:id= "@+id/til_pwd"
        android:layout_width= " Match_parent "
        android:layout_height=" wrap_content ">

        <edittext
            android:layout_width=" Match_ Parent "
            android:layout_height=" wrap_content "/>

</android.support.design.widget.textinputlayout >

It is important to note that he is included in the EditText and cannot be used alone.
In the code, we set it up to listen:

Final Textinputlayout textinputlayout = (textinputlayout) Findviewbyid (r.id.til_pwd);

        EditText edittext = Textinputlayout.getedittext ();
        Textinputlayout.sethint ("Password");

        Edittext.addtextchangedlistener (New Textwatcher () {
            @Override public
            void beforetextchanged (Charsequence s, int start, int count, int after) {
                if (s.length () > 4) {
                    textinputlayout.seterror ("Password error");
                    Textinputlayout.seterrorenabled (true);
                else {
                    textinputlayout.seterrorenabled (false);
                }
            }

            @Override public
            void ontextchanged (charsequence s, int start, int before, int count) {
            }

            @Override
            public void aftertextchanged (Editable s) {
            }
        });
    

This: The display effect is as follows:

When you enter:

Notice here that the color of the textinputlayout comes from the coloraccent color in the style:

<item name= "Coloraccent" > #1743b7 </item>

Below we give a description of the Google API doc to learn more about how to use Textinputlayout:

Http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

3, the role of floating action button:
The Loating action button is a circular button that is responsible for displaying the basic operation of the interface. The Floatingactionbutton in the design library implements a default color for the Coloraccent suspension operation button in the theme, like this:

Floatingactionbutton--fab use is very simple, you can specify in the enhanced Framelayout inside--coordinatorlayout, which we will later.
For the use of fab, you can think of it as a button.

<android.support.design.widget.floatingactionbutton
        android:id= "@+id/fab"
        android:layout_width= " Wrap_content "
        android:layout_height=" wrap_content "
        android:layout_gravity=" End|bottom "
        android: layout_margin= "@dimen/fab_margin"
        android:src= "@drawable/ic_done"/>

You can specify its location by specifying layout_gravity.
Again, you can specify anchor, which is the point at which the location is displayed:

<android.support.design.widget.floatingactionbutton
        android:layout_height= "Wrap_content"
        android: Layout_width= "Wrap_content"
        app:layout_anchor= "@id/app_bar"
        app:layout_anchorgravity= "bottom|right|end "
        android:src=" @android:d rawable/ic_done "
        android:layout_margin=" 15DP "
        android:clickable=" true " />

In addition to the general size of the suspension operation button, it also supports the mini size (fabsize= "Mini"). Floatingactionbutton inherits from ImageView, you can use any android:src or ImageView method, such as setimagedrawable () To set the icon inside the Floatingactionbutton.

Http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

4, the use of Tablayout
tab Sliding switch view is not a new concept, but Google is the first time in the support library to provide complete support, and the design library tablayout both achieve a fixed tab-view width evenly distributed, A scrollable tab is also implemented-the view width is not fixed and can be scrolled horizontally. Tabs can be added dynamically in your program:

Tablayout tablayout = (tablayout) Findviewbyid (r.id.tabs);
    Tablayout.addtab (Tablayout.newtab (). SetText ("Tab1"));
    Tablayout.addtab (Tablayout.newtab (). SetText ("tab2"));
    Tablayout.addtab (Tablayout.newtab (). SetText ("Tab3")); we don't use it in time, usually the slide layout will work with Viewpager, so we need Viewpager to help:

    Mviewpager = (Viewpager) Findviewbyid (R.id.viewpager);
        Setting Viewpager data such as
        Setupviewpager ();
        Tablayout tablayout = (tablayout) Findviewbyid (r.id.tabs);
        Tablayout.setupwithviewpager (Mviewpager);

Through a word setupwithviewpager, we put Viewpager and tablayout together.

Http://developer.android.com/reference/android/support/design/widget/TabLayout.html

5, the use of Navigationview
Navigationview is important in MD design, and Google has previously proposed using Drawerlayout to implement navigation drawers. This time, in the support library, Google provides navigationview to implement the navigation menu interface, so the new navigation interface can be written like this:

<android.support.v4.widget.drawerlayout
    android:id= "@+id/dl_main_drawer"
    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" >

    <!--your content layout-->
    <include layout= "@layout/navigation_content"/>

    < Android.support.design.widget.NavigationView
        android:id= "@+id/nv_main_navigation"
        android:layout_ Width= "Wrap_content"
        android:layout_height= "match_parent"
        android:layout_gravity= "Start"
        app: headerlayout= "@layout/navigation_header"
        app:menu= "@menu/drawer_view"/>

</ Android.support.v4.widget.drawerlayout>

The most important of these are the two properties:

App:headerlayout
App:menu

With these two properties, we can easily specify the header layout and menu layout for the navigation interface:

The top layout of the

is the header layout specified by App:headerlayout:

<?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=" 200DP "Andro 
              Id:background= "Attr/colorprimarydark" android:gravity= "center" android:orientation= "vertical" android:padding= "16DP" android:theme= "@style/themeoverlay.appcompat.dark" > <imagev
        Iew android:layout_width= "100DP" android:layout_height= "100DP" android:layout_margintop= "16DP" android:background= "@drawable/ic_user"/> <textview android:layout_width= "Match_parent" and roid:layout_height= "Wrap_content" android:layout_margintop= "16DP" android:gravity= "Center" Android : text= "Xuyisheng" android:textappearance= "@style/textappearance.appcompat.body1" android:textsize= "20SP"/&

Gt </LinearLayout>

And the following menu layout, we can automatically generate directly through the menu content, without requiring us to specify the layout:

<?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/nav_home" android:icon= "@drawable/ic_dashboard" android:title= "CC Talk"/> <item D= "@+id/nav_messages" android:icon= "@drawable/ic_event" android:title= "HJ Class"/> < Item android:id= "@+id/nav_friends" android:icon= "@drawable/ic_headset" android:title= "
            Words "/> <item android:id= @+id/nav_discussion" android:icon= "@drawable/ic_forum"
            android:title= "Big HJ"/> </group> <item android:title= "Version" > <menu>
            <item android:icon= "@drawable/ic_dashboard" android:title= "Android"/>
                <itemandroid:icon= "@drawable/ic_dashboard" android:title= "IOS"/> </menu> </item> &L T;/menu>

You can get the callback event that the element is selected by setting a Onnavigationitemselectedlistener and using its setnavigationitemselectedlistener (). It provides you with clicked menu elements that allow you to handle selection events, change check box status, load new content, turn off navigation menus, and any other actions you want to do. For example this:

private void Setupdrawercontent (Navigationview navigationview) {
        Navigationview.setnavigationitemselectedlistener (
                new Navigationview.onnavigationitemselectedlistener () {
                    @Override Public
                    boolean onnavigationitemselected (MenuItem MenuItem) {
                        menuitem.setchecked (true);
                        Mdrawerlayout.closedrawers ();
                        return true;}}
                );
    

As you can see, Google encapsulates these things in a very easy to use.

6, the use of Appbarlayout
Appbarlayout, like its name, takes all the components of a container class as AppBar. Like this:

Here is to put toolbar and tablayout into the appbarlayout, let them as a whole as a appbar.

    <android.support.design.widget.appbarlayout
        android:id= "@+id/appbar"
        android:layout_width= "Match_ Parent "
        android:layout_height=" wrap_content "
        android:theme=" @style ThemeOverlay.AppCompat.Dark.ActionBar ">

        <android.support.v7.widget.toolbar
            android:id=" @+id/ Toolbar "
            android:layout_width=" match_parent "
            android:layout_height="? Attr/actionbarsize "
            android: Background= "Attr/colorprimary"
            app:popuptheme= "@style/themeoverlay.appcompat.light"/>

        < Android.support.design.widget.TabLayout
            android:id= "@+id/tabs"
            android:layout_width= "Match_parent"
            android:layout_height= "wrap_content"/>

    </android.support.design.widget.AppBarLayout>

Http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

7, the use of Coordinatorlayout
Coordinatorlayout is the newly added enhanced framelayout. In Coordinatorlayout, we can do a lot of new operations on the basis of framelayout.

Floating View

A new feature of MD is the addition of a lot of floating view, like the floating Action Button we mentioned earlier. We can put the fab anywhere, just by:

Android:layout_gravity= "End|bottom"
1
1
To specify the location of the display. It also provides layout_anchor for you to set anchor points for display coordinates:

App:layout_anchor= "@id/appbar"

Create scrolling

Coordinatorlayout can be said to be the most important of the support library update. It controls the layout of the touch events between the child view from another level, and many of the controls in the design library take advantage of it.

A good example is when you add Floatingactionbutton as a child view and pass the Coordinatorlayout to Snackbar.make (), On Devices 3.0 and above, Snackbar does not appear above the suspension button, but instead Floatingactionbutton uses the callback method provided by Coordinatorlayout to automatically move up and out of position when the Snackbar enters with animation, and in snack Bar animation disappears back to the original position, no need for additional code.
The official example is a good illustration of this:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" android:layout_width= "Match_parent" android:layou t_height= "Match_parent" > <! --Your scrollable View--> <android.support.v7.widget.recyclerview android:layout_width= "Match_pare NT "android:layout_height=" Match_parent "app:layout_behavior=" @string/appbar_scrolling_view_behavi
            or "/> <android.support.design.widget.appbarlayout android:layout_width=" Match_parent "
                  android:layout_height= "Wrap_content" > <android.support.v7.widget.toolbar ...
                  app:layout_scrollflags= "Scroll|enteralways" > <android.support.design.widget.tablayout ... app:layout_scrollflags= "Scroll|enteralways" > </android.support.Design.widget.appbarlayout> </android.support.design.widget.CoordinatorLayout> 

Among them, a component that can be scrolled, such as Recyclerview, ListView (note here, it seems to support only Recyclerview, ListView, if you use a scrollview, is not effective). If:
1, to this scrollable component set the Layout_behavior
2, to another control set the Layout_scrollflags
Then, when a Layout_behavior control is set to slide, a change in the state of the control that set the Layout_scrollflags is triggered.

There are several options for setting the Layout_scrollflags:

Scroll: All the view that wants to scroll out of the screen needs to be set this flag-not set this flag view will be fastened to the top of the screen.
Enteralways: This flag lets any downward scrolling cause the view to become visible, enabling fast "return mode".
Enteralwayscollapsed: When your view has set the MinHeight attribute and use this flag, your view can only be entered at a minimum height, and only when the scrolling view reaches the top does it extend to the full height.
Exituntilcollapsed:this flag causes the view to scroll off until it's ' collapsed ' (its minheight) before exiting.
It should be noted that the following two models are basically only used in Collapsingtoolbarlayout, and the previous two models are basically needed to use together, that is, these flag use of the scene, the basic has been fixed.
For example, in our previous example, this is the pattern:

App:layout_scrollflags= "Scroll|enteralways"

PS: All view using scroll flag must be defined in front of a view that does not use scroll flag to ensure that all view exits from the top, leaving a fixed element.
Http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

8, the use of Collapsingtoolbarlayout
Collapsingtoolbarlayout provides a folding toolbar, which is also the result of Google +, photos. Google made it into a standard control, more convenient for everyone to use.

Let's look at an example here:

 <android.support.design.widget.appbarlayout android:id= "@+id/appbar" Andro Id:layout_width= "Match_parent" android:layout_height= "@dimen/detail_backdrop_height" Android:fitssystemwin Dows= "true" android:theme= "@style/themeoverlay.appcompat.dark.actionbar" > <ANDROID.SUPPORT.DESIGN.W Idget.
            Collapsingtoolbarlayout android:id= "@+id/collapsing_toolbar" android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:fitssystemwindows= "true" app:contentscrim=
            "? Attr/colorprimary" app:expandedtitlemarginend= "64DP" app:expandedtitlemarginstart= "48DP" app:layout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:id= "@+id/ba Ckdrop "android:layout_width=" match_parent "android:layout_height=" Match_