Android----Material Design (floatactionbutton,coordinatorlayout,collapsingtoolbarlayout,appbarlayout, Tablayout, etc.)

Material design Some of the UI is usually developed or used more, previously did not write, recently summed up, write a blog, the request version in more than 5.0.

The main introduction of Floatactionbutton,coordinatorlayout,collapsingtoolbarlayout,appbarlayout,toolbar,tablayout,recyclerview, CardView

The use of these is included in the case;

Add before use in Build.gradle

    compile'com.android.support:appcompat-v7:24.2.1'    compile' com.jaeger.statusbaruitl:library:1.1.1'    compile'com.android.support:design:24.2.+ '      compile' com.android.support:cardview-v7:24.2.1 '

1:floatactionbutton ( hover button )

Floatactionbutton is the inheritance class of ImageButton, its usage is basically similar to the ordinary button, the suspension effect, so the focus of its use is actually on the layout.

Effect

 <Android. Support.design.widget.FloatingActionButton Android:id= "@+id/fab"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_margin= "15DP"android:layout_gravity= "Bottom|right"app:fabsize= "normal"app:elevation= "6DP"android:src= "@mipmap/ic_launcher"App:pressedtranslationz= "25DP"        />

Combined with Snackbar

Property Description:

1, app:borderwidth= ""------------------border width, usually set to 0, to solve the problem that the shadow does not display correctly on Android 5.X device

2, app:backgroundtint= ""---------------the background color of the button, not set, the default use of theme Coloraccent color

3, app:ripplecolor= ""--------------------Click on the Edge shadow color

4, app:elevation= ""----------------------the width of the edge shadow

5, app:pressedtranslationz= "16DP"-----Click the button, the width of the shadow of the button edge, usually set larger than the value of elevation

2:coordinatorlayout+appbarlayout+collapsingtoolbarlayout (Toolbar telescopic folding)

Implements the material Design folding toolbar, which inherits to Framelayout, sets it to Layout_scrollflags,

It can control the controls contained in Collapsingtoolbarlayout (such as: ImageView, Toolbar) to make corresponding Scrollflags scrolling events when responding to Layout_behavior events (removing the screen or pinning it to the top of the screen )。

Effect

Code to implement:

<?XML version= "1.0" encoding= "Utf-8"?><Android. Support.design.widget.CoordinatorLayout xmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:app= "Http://schemas.android.com/apk/res-auto"Android:id= "@+id/main_content"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:fitssystemwindows= "true">    <Android. Support.design.widget.AppBarLayout Android:id= "@+id/appbar"Android:layout_width= "Match_parent"Android:layout_height= "226DP"Android:theme= "@style/themeoverlay.appcompat.dark.actionbar"android:fitssystemwindows= "true">        <Android. Support.design.widget.CollapsingToolbarLayout Android:id= "@+id/collapsing_toolbar"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"App:layout_scrollflags= "scroll|exituntilcollapsed"android:fitssystemwindows= "true"App:contentscrim= "? Attr/colorprimary"App:expandedtitlemarginstart= "48DP"App:expandedtitlemarginend= "64DP">            <ImageViewApp:layout_scrollflags= "scroll|enteralways|enteralwayscollapsed"Android:id= "@+id/backdrop"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:scaletype= "Centercrop"android:fitssystemwindows= "true"android:src= "@mipmap/zhangwo_hometop1"App:layout_collapsemode= "Parallax"                />            <Android. Support.v7.widget.Toolbar Android:id= "@+id/toolbar"Android:layout_width= "Match_parent"Android:layout_height= "? Attr/actionbarsize"App:popuptheme= "@style/themeoverlay.appcompat.light"App:layout_collapsemode= "Pin" />        </Android.support.design.widget.CollapsingToolbarLayout>    </Android.support.design.widget.AppBarLayout>    <Android. Support.v4.widget.NestedScrollView android:layout_width= "Match_parent"Android:layout_height= "Match_parent"App:layout_behavior= "@string/appbar_scrolling_view_behavior">        <Android. Support.v7.widget.RecyclerView Android:id= "@+id/recyclerview"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:scrollbars= "None" />    </Android.support.v4.widget.NestedScrollView>    <Android. Support.design.widget.FloatingActionButton Android:id= "@+id/fab"Android:layout_height= "Wrap_content"Android:layout_width= "Wrap_content"App:layout_anchor= "@id/appbar"app:layout_anchorgravity= "Bottom|right|end"android:src= "@mipmap/ic_launcher"Android:layout_margin= "15DP"android:clickable= "true"/></Android.support.design.widget.CoordinatorLayout>

3:coordinatorlayout+appbarlayout+tablayout (Toolbar telescopic folding)

Coordinatorlayout is the control in the Support.design package, which can be said to be the most important control in the design library.

Coordinatorlayout implements the scrolling effect mentioned in various material design.

：

Layout

<?XML version= "1.0" encoding= "Utf-8"?><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:layout_height= "Match_parent"android:orientation= "vertical">    <Android. Support.design.widget.AppBarLayout android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:theme= "@style/themeoverlay.appcompat.dark.actionbar">        <!--app:layout_scrollflags 1, scroll: All the view that wants to scroll out of the screen need to set this flag, the view without setting this flag will be fixed at the top of the screen.        For example, Tablayout does not set this value and will stay at the top of the screen.        2. Enteralways: When this flag is set, scrolling down will cause the view to become visible, enabling quick "return mode".        3, enteralwayscollapsed: When your view has set the MinHeight property and use this flag, your view can only enter the minimum height, only when the scroll view reaches the top of the full height. 4, exituntilcollapsed: Scroll to exit the screen, and finally collapsed at the top.  -        <Android. Support.v7.widget.Toolbar Android:id= "@+id/appbar_toolbar"App:layout_scrollflags= "Scroll|enteralways"App:popuptheme= "@style/theme.appcompat.light"Android:layout_width= "Match_parent"Android:layout_height= "? Attr/actionbarsize"Android:background= "? Attr/colorprimary" />        <Android. Support.design.widget.TabLayout Android:id= "@+id/tabs"app:tabgravity= "Fill"App:tabmode= "fixed"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content" />    </Android.support.design.widget.AppBarLayout>    <Android. Support.v4.view.ViewPager Android:id= "@+id/viewpager"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"App:layout_behavior= "@string/appbar_scrolling_view_behavior" />    <!--Three: The animation of sliding components, full screen only effect. App:layout_behavior= "@string/appbar_scrolling_view_behavior" -</Android.support.design.widget.CoordinatorLayout>

For other related information, please read the blog:

Android'stoolbar and custom toolbar for immersive status barAndroid News customer service top navigation bar tab Click and left and right swipe to implement the toggle interface Android Slide-up menu Drawerlayout use Android swiperefreshlayout dropdown refresh component Android Recyclerview,cardview and corresponding pull-up refresh pull-down loading

Because the code is too many, do not paste it out, the source of direct download can

SOURCE download

Android----Material Design (floatactionbutton,coordinatorlayout,collapsingtoolbarlayout,appbarlayout, Tablayout, etc.)