Android Development with material design-style folding layouts

About folding layouts, you may not be unfamiliar, the latest version of Momo, or some other social app has a folding layout. Folding the layout to make our app more interactive and more beautiful, first to show:

This is a personal app that I do the main interface, you can see, when sliding, the big title as the pull into a small title, while moving the position, and there is a picture, fade screen with sliding. If you know material Design, then this seemingly complex effect is easy to implement, and it's all done with the component properties of this Desigon dependency library.

First join the dependent library:

Compile ' com.android.support:design:23.3.0' com.android.support:recyclerview-v7:23.3.0 '

It is best to add recyclerview dependencies, don't ask me why, experience.

Then the layout:

<android.support.design.widget.CoordinatorLayout android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:id= "@+id/cdl_content"xmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:app= "Http://schemas.android.com/apk/res-auto" > <android.support.design.widget.AppBarLayout android:layout_width= "Match_parent"Android:layout_height= "200DP"Android:theme= "@style/themeoverlay.appcompat.dark.actionbar" > <android.support.design.widget.CollapsingToolbarLayout android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:id= "@+id/ctl_title"App:layout_scrollflags= "Scroll|exituntilcollapsed"App:contentscrim= "? attr/colorprimary" > <ImageView android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:background= "@drawable/titile_bg2"App:layout_collapsemode= "Parallax"App:layout_collapseparallaxmultiplier= "0.7"/> <Android.support.v7.widget.Toolbar android:layout_width= "Match_parent"Android:layout_height= "? Attr/actionbarsize"Android:id= "@+id/tl_title"App:theme= "@style/themeoverlay.appcompat.dark.actionbar"App:popuptheme= "@style/themeoverlay.appcompat.light"App:layout_collapsemode= "Pin" > </android.support.v7.widget.Toolbar> </android.support.design.widget.collapsingtoolb Arlayout> </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" > <Com.yakir.view.ScoreGridView android:layout_margintop= "20DP"Android:layout_marginleft= "10DP"Android:layout_marginright= "10DP"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:numcolumns= "3"Android:cachecolorhint= "#00000000"android:gravity= "Center_vertical"android:horizontalspacing= "10DP"android:verticalspacing= "10DP"Android:id= "@+id/gv_menu" ></com.yakir.view.ScoreGridView> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

Then the logic code:

        Setsupportactionbar (toolbartitle);        Ctl_title.setcollapsedtitlegravity (gravity.center);        Ctl_title.setexpandedtitlegravity (gravity.center);        Ctl_title.settitle ("mobile phone security defender");        Ctl_title.setexpandedtitlecolor (color.white);        Ctl_title.setcollapsedtitletextcolor (color.white);

Google after 5.0 recommended the use of toolbar instead of Actionbar,toolbar more scalable. A very important control of this dependent library is: coordinatorlayout, coordinating the layout. This is an important layout in which these layouts are linked together. Next

Besides, folding layout:collapsingtoolbarlayout, it's:Expanded pull out,collapsed off, you can set some related properties. The most important thing is to set: app:layout_scrollflags= "scroll|exituntilcollapsed" so that it scrolls with the swipe. In toolbar, set:app:layout_collapsemode= "pin"so that it does not leave the screen with a swipe. Sets the height of the display folds in appbarlayout. You can also set the ImageView in the package

Slide linkage effect: app:layout_collapsemode= "parallax" app:layout_collapseparallaxmultiplier= "0.7". In fact, the implementation is not particularly complex, as long as the understanding of the use of these new spaces, it is easy to do what you want to cool effect. Well, if you have any questions, please feel free to contact us below. I hope to be of some help to you.

Android Development with material design-style folding layouts