Use coordinatorlayout+appbarlayout+collapsingtoolbarlayout to create a collapsed status bar

Layout

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="ResourceName">

    <data>

        <variable
            name="listener"
            type="android.view.View.OnClickListener" />
    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/cl_car_binding_yes"
        android:background="@android:color/holo_red_light">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/apl_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent">
<!--collapsedTitleGravity: Specify the position of the title when folding   expandedTitleGravity: The position of the title bar when the layout is not collapsed -->
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/ctl_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:collapsedTitleGravity="center"
                app:collapsedTitleTextAppearance="@style/ToolbarCollapsedText"
                app:expandedTitleGravity="start|top"
                app:expandedTitleMarginTop="80dp"
                app:expandedTitleTextAppearance="@style/ToolbarExpandedText"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:statusBarScrim="@color/transparent">


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/iv_tool_bg"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:fitsSystemWindows="true"
                        android:scaleType="fitXY"
                        android:src="@color/transparent"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.7" />

                    <TextView
                        android:id="@+id/tv_car_about"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/black"
                        android:textSize="16sp"
                        android:gravity="center"
                        android:layout_marginRight="10dp"
                        android:layout_marginTop="54dp"
                        android:text=" more "
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ve_vector_more_horiz"
                        android:onClick="@{listener}"
                        android:visibility="invisible"/>

                    <RelativeLayout
                        android:id="@+id/rl_car_info"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tv_car_about"
                        android:layout_marginTop="20dp">

                        <TextView
                            android:id="@+id/tv_car_num"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=" title "
                            android:textColor="@color/white"
                            android:textSize="20sp"
                            android:layout_centerVertical="true"
                            android:layout_alignParentLeft="true"
                            android:layout_marginLeft="30dp"/>

                    </RelativeLayout>

                    <LinearLayout
                        android:id="@+id/ll_car_refresh"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal"
                        android:layout_below="@+id/rl_car_info">


                        <TextView
                            android:id="@+id/tv_refresh_time"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="30dp"
                            android:text=" Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka, Kaka "
                            android:textColor="@color/white"
                            android:textSize="12sp"/>



                    </LinearLayout>

                </RelativeLayout>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/tb_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="90dp"
                    android:background="@android:color/holo_blue_light"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/Toolbar.TitleText">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_gravity="center"
                        android:layout_marginTop="50dp">

                        <TextView
                            android:id="@+id/toolbar_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=" title "
                            android:textColor="@color/white"
                            android:textSize="18sp"
                            android:layout_centerInParent="true"/>

                        <TextView
                            android:id="@+id/tv_car_about_again"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:layout_marginRight="10dp"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:background="@drawable/ve_vector_more_horiz"
                            android:onClick="@{listener}"/>

                    </RelativeLayout>

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

monitor

  private fun initToolbar() {
        (this as AppCompatActivity).setSupportActionBar(mBinding.tbToolbar) // Set up toolbar
        mBinding.ctlToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT)// Set the color of the expanded title 
        mBinding.ctlToolbarLayout.setCollapsedTitleTextColor(Color.BLACK)// Set the color of the title after shrinking 

        mBinding.aplAppBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, i ->
            val percent = abs(i).toFloat() / appBarLayout.totalScrollRange
            mBinding.tbToolbar.setBackgroundColor(Color.parseColor("#FFFFFF"))

            if (percent > 0.75f) {
                if (isEx) {
                    isEx = false
                    mBinding.toolbarTitle.setTextColor(resources.getColor(R.color.color_333333))
                    mBinding.tvCarAboutAgain.setBackgroundResource(R.drawable.ve_vector_more_horiz_black)
                    mBinding.toolbarTitle.text = " title "
                }
            } else {
                if (!isEx) {
                    isEx = true
                    mBinding.toolbarTitle.setTextColor(Color.WHITE)
                    mBinding.tvCarAboutAgain.setBackgroundResource(R.drawable.ve_vector_more_horiz)
                    mBinding.toolbarTitle.text = ""
                }
            }
        })
    }

CoordinatorLayout attribute

CoordinatorLayout Inherited from FrameLayout, There are two main uses ：

1、 As APP Top level layout 

2、 As a container with one or more children View Interact 

CoordinatorLayout Can be coordinated View, And these children View  The specific response action of is through  behavior  Designated .

 General needs and AppBarLayout、CollapsingToolbarLayout Use a combination of , To achieve cool interaction .

AppbarLayout

AppbarLayout Inherited from LinearLayout, It's a vertical LinearLayout, It has achieved Material Design Many functions and features of , That is, the rolling gesture .

AppbarLayout  Heavily dependent on CoordinatorLayout, Must be used for CoordinatorLayout  The direct son of View, If you will AppbarLayout  Put it on the other ViewGroup  Inside , Then its functions are invalid .

 His son View Can pass setScrollFlags() Or in the xml Through the layout app:layout_scrollFlags Property to set the desired scrolling behavior .

app:layout_scrollFlags Property introduction 
scroll
View Roll out or into the screen with a scrolling event .

1、 If other values are used , You have to use this value to work 

2、 If it's here View Any other in front of View This value is not set , So this View The settings for will not work .

enterAlways
 Quick return mode .

 It's actually rolling down Scrolling View and Child View Between the rolling priority problem .

 contrast scroll and scroll | enterAlways Set up , When a scroll down event occurs , The former has priority over scrolling Scrolling View, The latter has priority in scrolling Child View, When the first scrolling party has all rolled into the screen , The other side just started rolling .

enterAlwaysCollapsed
enterAlways The added value of . This involves Child View Height and minimum height of , When you scroll down ,Child View First scroll down the minimum height value , then Scrolling View Start rolling , When we reach the border ,Child View Scroll down again , Until the display is complete .

exitUntilCollapsed
 There's also the minimum height involved . When a scroll up event occurs ,Child View Scroll up and exit until the minimum height , then Scrolling View Start rolling . That is to say ,Child View It doesn't exit the screen completely .

snap
 Simple understanding , Namely Child View Rolling ratio of an adsorption effect . in other words ,Child View There will be no local display , rolling Child View Part of the height of , When we release our fingers ,Child View Or all the way up and out of the screen , Or scroll all the way down to the screen , It's kind of similar ViewPager Slide left and right .

enterAlways、enterAlwaysCollapsed、exitUntilCollapsed、snap These attributes need to be matched scroll Attribute is used to have effect , Using it alone has no effect .

addOnOffsetChangedListener	     When AppbarLayout  Call back when the vertical offset of is changed 
removeOnOffsetChangedListener	  remove offsetChanged Monitor 
setExpanded (boolean expanded)	 Set up AppbarLayout  Is it an expanded state or a collapsed state , Animation by default 
setExpanded (boolean expanded, boolean animate)	 Set up AppbarLayout  Is it an expanded state or a collapsed state ,animate  Parameters control whether animation is required when switching to a new state 
setOrientation								 Set up AppbarLayout The children in the garden View Arrange the direction 
getTotalScrollRange					 return AppbarLayout  All the children in the View Sliding range of 

CollapsingToolbarLayout

1、 This is a foldable Toolbar

2、 It must be used in AppBarLayout Based on , It has to be AppBarLayout The direct subclass elements of use , Otherwise, it will not have the effect of application .

3、CollapsingToolbarLayout The sub layouts of are 3 A folding mode （Toolbar Set in the app:layout_collapseMode）

off： This is the default property , The layout will display normally , No folding behavior .

pin：CollapsingToolbarLayout After folding , This layout will be fixed at the top .

parallax：CollapsingToolbarLayout When folding , This layout will also have parallax folding effect .
 When CollapsingToolbarLayout The sub layout of is set parallax Mode time , We can also go through app:layout_collapseParallaxMultiplier Set the parallax scrolling factor , The value is ：0~1

attribute

app:collapsedTitleGravity=”” attribute 
 Specify the position of the title when folding , Provided values are ：top、bottom、left、right、center_vertical、fill_vertical、center_horizental、center、start、end

app:collapsedTitleTextAppearance=”” attribute 
 Set the appearance of title bar text when folding 

app:contentScrim=”” attribute 
 Set when being rolled out of the screen CollapsingToolbarLayout The style of , Need to be a color value 

app:expandedTitleGravity=”” attribute 
 The position of the title bar when the layout is not collapsed , The value provided is the same as app:collapsedTitleGravity=”” Same property , Set multiple times to use “|” Division 

app:statusBarScrim=”#123456” attribute 
 The background color of the status bar when folding 

design sketch