Android AppBarLayout & ViewPager

https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout

coding on three years ago

// The TitleLayout view scrolling with content view ,

flag: enterAlways ： drop down immediately

<androidx.coordinatorlayout.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:fitsSystemWindows="false">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:fitsSystemWindows="true">

        // fragment_toolbar
        // app:layout_scrollFlags="scroll|enterAlways"
        <include layout="@layout/fragment_toolbar" />

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

    //fragment_viewpager
    //app:layout_behavior="@string/appbar_scrolling_view_behavior"
    <include layout="@layout/fragment_viewpager" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

remove appbarlayout default elevation

 <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:background="@color/transparent"
        android:fitsSystemWindows="false">
</com.google.android.material.appbar.AppBarLayout>

remove toolbar default padding

 app:contentInsetEnd="0dp"
 app:contentInsetLeft="0dp"
 app:contentInsetRight="0dp"
 app:contentInsetStart="0dp"

Pined a banner when scroll out of screen which below the TitleLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:fitsSystemWindows="true">

        <include layout="@layout/fragment_toolbar" />

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent"
            android:fitsSystemWindows="true"
            app:contentScrim="@android:color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentInsetEnd="0dp"
                app:contentInsetLeft="0dp"
                app:contentInsetRight="0dp"
                app:contentInsetStart="0dp"
                app:contentScrim="@android:color/white"
                app:layout_collapseMode="pin">

                <include layout="@layout/fragment_banner" />

            </androidx.appcompat.widget.Toolbar>

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

    <include layout="@layout/fragment_viewpager" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Change the viewpager height dymic or replace by ‘scrollview’ or ‘listView’ which is scoller view

fragment_viewpager
android:fillViewport="true"

change statusbar & contentscrim color

statusbar
contentscrim

combine two colors by scroll-dy

calc scroll distance

palette color:

private fun setPaletteColor(drawable: Drawable?, view: View?) {
        if(null != drawable) {
            // If you need to continuously generate palettes for a sorted list of images or objects,
            // consider caching the Palette instances to prevent slow UI performance.
            // You also should not create the palettes on your main thread.
            Palette.from(drawable.toBitmap()).generate { palette ->
                val color = palette?.mutedSwatch?.rgb
                var defaultColor = Color.parseColor("#80000000")
                view?.setBackgroundColor(color?:defaultColor)
            }
        }
    }

blur-effect:

https://medium.com/androiddevelopers/blurring-the-lines-4fd33821b83c

fun updateEffect(progress: Float) {
    if (progress > 0) {
        val blur = RenderEffect.createBlurEffect(
            progress, progress, Shader.TileMode.CLAMP)
        pictureGrid.setRenderEffect(blur)
    } else {
        pictureGrid.setRenderEffect(null)
    }
}

blur-bitmap:

merge colors:

   val startColor = Color.argb(155, Color.red(sColor), Color.green(sColor), Color.blue(sColor))
        val endColor = Color.argb(255, Color.red(eColor), Color.green(eColor), Color.blue(eColor))

demo-out: