The Collapsing Toolbar Layout function is to provide a collapsible Toolbar, which inherits from FrameLayout and sets layout_scroll Flags to it. It can control the controls contained in Collapsing Toolbar Layout (such as ImageView, Toolbar) to scroll Flags in response to layout_behavior events (removing the screen or fixing it at the top of the screen).

Using Collapsing Toolbar Layout:

1. <android.support.design.widget.AppBarLayout  
2.         android:layout_width="match_parent"  
3.         android:layout_height="256dp"  
4.         android:fitsSystemWindows="true">  
5.         <android.support.design.widget.CollapsingToolbarLayout  
6.             android:id="@+id/collapsing_toolbar_layout"  
7.             android:layout_width="match_parent"  
8.             android:layout_height="match_parent"  
9.             app:contentScrim="#30469b"  
10.             app:expandedTitleMarginStart="48dp"  
11.             app:layout_scrollFlags="scroll|exitUntilCollapsed">  
12.             <ImageView  
13.                 android:layout_width="match_parent"  
14.                 android:layout_height="match_parent"  
15.                 android:scaleType="centerCrop"  
16.                 android:src="@mipmap/bg"  
17.                 app:layout_collapseMode="parallax"  
18.                 app:layout_collapseParallaxMultiplier="0.7"  />  
19.             <android.support.v7.widget.Toolbar  
20.                 android:id="@+id/toolbar"  
21.                 android:layout_width="match_parent"  
22.                 android:layout_height="?attr/actionBarSize"  
23.                 app:layout_collapseMode="pin" />  
24.         </android.support.design.widget.CollapsingToolbarLayout>  
25.     </android.support.design.widget.AppBarLayout>  

App: contentScrim="b"// / Sets the background color when fully Collapsing Toolbar Layout folds (shrinks).
App: Expanded TitleMarginStart= "48dp"// Sets the distance that title fills to the left when it expands (before it shrinks).
App: layout_scrollFlags= "scroll | exit Until Collapsed" // Contracts View as you scroll up, but you can fix the Toolbar to be on it all the time.
When app: layout_collapse mode= "parallax"//is set to this mode, the View (such as ImageView) in Collapsing Toolbar Layout can also scroll at the same time to achieve parallax scrolling effect, which is usually used in conjunction with layout_collapseParallax Multiplier (setting parallax factor).
App: layout_collapseParallax Multiplier= "0.7"// Sets the parallax scroll factor with a value of 0-1.
When app:layout_collapseMode="pin"//pin is set to this mode, when Collapsing Toolbar Layout shrinks completely, the Toolbar can also be retained on the screen.

We set up an ImageView and a Toolbar in Collapsing Toolbar Layout. And put this Collapsing Toolbar Layout in AppBarLayout as a whole.

1. In Collapsing Toolbar Layout:

We set layout_scrollFlags: I'll say again about its value:

• Scroll - This must be set if you want to scroll.

• enterAlways - Implement quick The return effect, when moving down, immediately displays View (such as Toolbar).

• Exit Until Collapsed - Shrink View as you scroll up, but you can fix the Toolbar on it all the time.

• EnterAlways Collapsed - When your View has set the minHeight property and uses this flag, your View can only enter at the minimum height and only expand to the full height when the scrolling view reaches the top.
  

Some attributes are also set up to briefly explain:

• contentScrim - Sets the background color when fully Collapsing Toolbar Layout folds (shrinks).

• Expanded TitleMarginStart - Sets the distance the title fills to the left when expanding (before contracting).

When not expanding, as shown below:

2. In the ImageView control:

We set up:

• layout_collapseMode (collapse mode) - There are two values:

  • pin - When set to this mode, when Collapsing Toolbar Layout shrinks completely, the Toolbar can also remain on the screen.

  • Parallax - When set to this mode, the View in Collapsing Toolbar Layout (such as ImageView) can also scroll at the same time to achieve parallax scrolling effect, which is usually used in conjunction with layout_collapseParallax Multiplier (setting parallax factor).

• Layout_collapseParallax Multiplier (Parallax Factor) - Sets the Parallax Scroll Factor with a value of 0-1.  
  

3. In the Toolbar control:

We set layout_collapse mode: for pin.

Summary analysis: When the control with layout_behavior responds to the layout_scroll Flags event in Collapsing Toolbar Layout, ImageView will scroll upward to remove the screen with parallax effect, and when it starts to fold, the background color of Collapsing Toolbar Layout (that is, the background color of Toolbar) will become the best background color for us, and the Toolbar will always be fixed at the top.

The effect is as follows:

[Note] When using Collapsing Toolbar Layout, you must set the title to Collapsing Toolbar Layout, which will not be displayed on the Toolbar. Namely:

mCollapsingToolbarLayout.setTitle(" ");

This changes the font color of title:

title color when expanding: mCollapsing Toolbar Layout. setExpanded TitleColor ();

The title color when displayed on the Toolbar after shrinkage: mCollapsing Toolbar Layout. setCollapsedTitleTextColor ();

In fact, Collapsing Toolbar Layout has helped us to do this. It will automatically overdo it. For example, we set the shrinking title color to green. The effect is as follows:

Let's see how the code works.

Layout file:

1. <android.support.design.widget.CoordinatorLayout   
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context=".MainActivity">  
8.     <android.support.design.widget.AppBarLayout  
9.         android:layout_width="match_parent"  
10.         android:layout_height="256dp"  
11.         android:fitsSystemWindows="true">  
12.         <android.support.design.widget.CollapsingToolbarLayout  
13.             android:id="@+id/collapsing_toolbar_layout"  
14.             android:layout_width="match_parent"  
15.             android:layout_height="match_parent"  
16.             app:contentScrim="#30469b"  
17.             app:expandedTitleMarginStart="48dp"  
18.             app:layout_scrollFlags="scroll|exitUntilCollapsed">  
19.             <ImageView  
20.                 android:layout_width="match_parent"  
21.                 android:layout_height="match_parent"  
22.                 android:scaleType="centerCrop"  
23.                 android:src="@mipmap/bg"  
24.                 app:layout_collapseMode="parallax"  
25.                 app:layout_collapseParallaxMultiplier="0.7"  />  
26.             <android.support.v7.widget.Toolbar  
27.                 android:id="@+id/toolbar"  
28.                 android:layout_width="match_parent"  
29.                 android:layout_height="?attr/actionBarSize"  
30.                 app:layout_collapseMode="pin" />  
31.         </android.support.design.widget.CollapsingToolbarLayout>  
32.     </android.support.design.widget.AppBarLayout>  
33.     <LinearLayout  
34.         android:layout_width="match_parent"  
35.         android:layout_height="match_parent"  
36.         android:orientation="vertical"  
37.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
38.         <android.support.v7.widget.RecyclerView  
39.             android:id="@+id/recyclerView"  
40.             android:layout_width="match_parent"  
41.             android:layout_height="match_parent"  
42.             android:scrollbars="none" />  
43.     </LinearLayout>  
44. </android.support.design.widget.CoordinatorLayout>  

Code file:

1. Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);  
2. setSupportActionBar(mToolbar);  
3. getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
4. mToolbar.setNavigationOnClickListener(new View.OnClickListener() {  
5.     @Override  
6.     public void onClick(View v) {  
7.         onBackPressed();  
8.     }  
9. });  
10. //Using Collapsing Toolbar Layout, you must set the title to Collapsing Toolbar Layout, which will not be displayed on the Toolbar.  
11. CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);  
12. mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");  
13. //Modify font color through Collapsing Toolbar Layout  
14. mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//Set font color without shrinking  
15. mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//Set the font color on the shrinking Toolbar