Material Design Collapsingtoolbarlayout Use

The collapsingtoolbarlayout function is to provide a collapsible 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 )。

Using collapsingtoolbarlayout:

<android.support.design.widget.appbarlayout android:layout_width= "Match_parent" android:layout_height= "25            6DP "android:fitssystemwindows=" true "> <android.support.design.widget.collapsingtoolbarlayout Android:id= "@+id/collapsing_toolbar_layout" android:layout_width= "Match_parent" android:layout_he ight= "Match_parent" app:contentscrim= "#30469b" app:expandedtitlemarginstart= "48DP" App:la yout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:layout_width= "Match_paren T "android:layout_height=" match_parent "android:scaletype=" Centercrop "Androi d:src= "@mipmap/bg" app:layout_collapsemode= "Parallax" app:layout_collapseparallaxmultiplier= "0.7"/> <android.support.v7.widget.toolbar android:id= "@+id/toolbar" Android Oid:layout_width= "Match_Parent "android:layout_height="? Attr/actionbarsize "app:layout_collapsemode=" pin "/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.appbarlayout >

we set up a ImageView and a toolbar in the Collapsingtoolbarlayout. And put this collapsingtoolbarlayout in the appbarlayout as a whole.

1, in the collapsingtoolbarlayout:

we set the Layout_scrollflags: about its value I'll say it again here:

• Scroll-You must set this if you want to scroll.
• Enteralways- implement the Quick return effect, and immediately display a view (such as toolbar) when moving down.
• exituntilcollapsed- shrinks the view when scrolling up, but can be fixed toolbar always on top.
• enteralwayscollapsed- When your view has set the MinHeight property and uses this flag, your view can only enter at the minimum height, and only when the scrolling view reaches the top will it expand to full height.
  

Some properties are also set, briefly stating:

• Contentscrim-Sets the background color when fully collapsingtoolbarlayout folded (shrunk).
• Expandedtitlemarginstart-Sets the distance to the left of the title when the extension is set (not yet contracted).

no time for expansion .

2. In the ImageView control:

We have set up:

• layout_collapsemode (folding mode)-  There are two values:
  • pin-& nbsp;   When set to this mode, the toolbar can also remain on the screen when the collapsingtoolbarlayout is fully shrunk.
  • parallax-  when it is set to this mode, when the content is scrolled, the view (such as ImageView) in the collapsingtoolbarlayout can also scroll simultaneously, realizing the parallax scrolling effect, usually and set parallax factor) with.
• Layout_collapseparallaxmultiplier (parallax Factor)-sets the parallax scrolling factor with a value of: 0~1.
  

3. In the Toolbar control:we set the Layout_collapsemode (folding mode): for PIN.
Comprehensive Analysis: When a layout_behavior-set control responds to the Layout_scrollflags event in Collapsingtoolbarlayout , ImageView will have a parallax scroll up to remove the screen, and when it starts to collapse, the background color of the collapsingtoolbarlayout (that is, the background color of toolbar) changes to the background color we set. The toolbar is always fixed at the top. Effect:

Note: When using Collapsingtoolbarlayout, the title must be set to collapsingtoolbarlayout and will not be displayed on toolbar. namely: mcollapsingtoolbarlayout.settitle (""); the font color for this variable title:the title color of the expansion time:mcollapsingtoolbarlayout.setexpandedtitlecolor (); color of Title when displayed on toolbar after shrinking:mcollapsingtoolbarlayout.setcollapsedtitletextcolor (); The color of the excessive change in fact Collapsingtoolbarlayout has helped us do, it will automatically over, for example, we put the title color after the contraction green, the effect

didn't record well, anyway the effect came out. then take a look at how the code is implemented:Layout file:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" xmlns:tools= "Http://schemas.android.com/tools" Android: Layout_width= "Match_parent" android:layout_height= "Match_parent" tools:context= ". Mainactivity "> <android.support.design.widget.appbarlayout android:layout_width=" match_parent "Android oid:layout_height= "256DP" android:fitssystemwindows= "true" > <android.support.design.widget.collapsingt            Oolbarlayout android:id= "@+id/collapsing_toolbar_layout" android:layout_width= "Match_parent" android:layout_height= "Match_parent" app:contentscrim= "#30469b" app:expandedtitlemarginstart= "48 DP "app:layout_scrollflags=" scroll|exituntilcollapsed "> <imageview android:layo Ut_width= "Match_parent" android:layout_height= "Match_pareNT "android:scaletype=" Centercrop "android:src=" @mipmap/bg "App:layout_collap Semode= "Parallax" app:layout_collapseparallaxmultiplier= "0.7"/> &LT;ANDROID.SUPPORT.V7.WIDG Et. Toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" Android : layout_height= "? attr/actionbarsize" app:layout_collapsemode= "pin"/> </android.support.design . Widgets. collapsingtoolbarlayout> </android.support.design.widget.AppBarLayout> <linearlayout Android:layo Ut_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" app:layou T_behavior= "@string/appbar_scrolling_view_behavior" > <android.support.v7.widget.recyclerview Andro            Id:id= "@+id/recyclerview" android:layout_width= "match_parent" android:layout_height= "Match_parent" android:scrollbars= "None"/> </LinearLayout></android.support.design.widget.CoordinatorLayout> 

Code files:

    Toolbar Mtoolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Setsupportactionbar (Mtoolbar);        Getsupportactionbar (). Setdisplayhomeasupenabled (true);        Mtoolbar.setnavigationonclicklistener (New View.onclicklistener () {            @Override public            void OnClick (View v) {                onbackpressed ();            }        });        You must set the title to Collapsingtoolbarlayout on the collapsingtoolbarlayout, and it will not be displayed on toolbar.        Collapsingtoolbarlayout Mcollapsingtoolbarlayout = (collapsingtoolbarlayout) Findviewbyid (r.id.collapsing_toolbar_layout);        Mcollapsingtoolbarlayout.settitle ("Collapsingtoolbarlayout");        Modify the font color by collapsingtoolbarlayout        Mcollapsingtoolbarlayout.setexpandedtitlecolor (color.white);// Set the font color Mcollapsingtoolbarlayout.setcollapsedtitletextcolor (color.green) when it has not shrunk,        //Set the color of the font on toolbar after shrinking

Upload the source code later: .....

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Material Design Collapsingtoolbarlayout Use