CollapsingToolbarLayout set animation threshold?

Question

In my application when I start scrolling the layout, the CollapsingToolbarLayout starts almost immediately changing the background to the scrim color I set.

Is there a way to set the value at which the CollapsingToolbar starts to change the background?

This is my XML layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="eu.ericnisoli.ambrosettiap.activities.MeetingActivity"
    android:visibility="visible"
    android:id="@+id/container">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="false">

            <RelativeLayout
                android:id="@+id/relativeLayout_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                app:layout_collapseMode="parallax">

                <FrameLayout
                    android:id="@+id/frameLayout_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_above="@+id/frameLayout_info">

                    <ImageView
                        android:id="@+id/imageView_bg"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/login_bg"
                        android:scaleType="centerCrop"/>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/detail_meeting_gradient" />

                    <LinearLayout
                        android:id="@+id/linearLayout_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:paddingStart="16dp"
                        android:paddingEnd="80dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:layout_gravity="bottom">

                        <TextView
                            android:id="@+id/textView_meeting"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="@string/meeting"
                            android:textColor="@color/text_grey_1"
                            android:textSize="@dimen/text_size_14"
                            android:textAllCaps="true"
                            />

                        <TextView
                            android:id="@+id/textView_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@android:color/white"
                            android:textSize="@dimen/text_size_16"
                            android:text="New Text"
                            />

                    </LinearLayout>

                </FrameLayout>

                <FrameLayout
                    android:id="@+id/frameLayout_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:background="@color/grey_2">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:paddingTop="32dp"
                            android:paddingBottom="32dp">

                            <LinearLayout
                                android:orientation="vertical"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:gravity="center">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/pin_small_icon"
                                    android:layout_marginBottom="4dp"/>

                                <TextView
                                    android:id="@+id/textView_place"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>

                                <TextView
                                    android:id="@+id/textView_address"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>
                            </LinearLayout>

                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:paddingTop="32dp"
                            android:paddingBottom="32dp">

                            <LinearLayout
                                android:orientation="vertical"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:gravity="center">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:src="@drawable/cal_small_icon"
                                    android:layout_marginBottom="4dp"/>

                                <TextView
                                    android:id="@+id/textView_date"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>

                                <TextView
                                    android:id="@+id/textView_time"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textColor="@color/text_black_1"/>
                            </LinearLayout>

                        </RelativeLayout>
                    </LinearLayout>

                </FrameLayout>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="@string/event_caps"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_anchor="@+id/app_bar"
            app:layout_anchorGravity="bottom"
            app:layout_collapseMode="pin">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:layout_anchor="@+id/app_bar"
                app:layout_anchorGravity="bottom"
                android:background="@color/grey_2"
                app:tabTextColor="@color/text_black_1"
                app:tabSelectedTextColor="@color/text_black_1"
                style="@style/DetailTab"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@drawable/shadow"
                android:layout_gravity="bottom"/>

        </FrameLayout>

        <android.support.v4.view.ViewPager
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_marginTop="?attr/actionBarSize"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            app:layout_anchor="@id/frameLayout_title"
            app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

<ProgressBar
    android:id="@+id/progress"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:indeterminate="true"
    android:layout_gravity="center"
    android:visibility="gone"/>

</FrameLayout>

Answer 1

With version 26.1 or newer, you can use the scrimVisibleHeightTrigger attribute to set the height threshold when to show the scrim overlay.

<android.support.design.widget.CollapsingToolbarLayout
    app:scrimVisibleHeightTrigger="80dp"
    ...>

Set the amount of visible height in pixels used to define when to trigger a scrim visibility change.

If the visible height of this view is less than the given value, the scrims will be made visible, otherwise they are hidden.

Answer 2

Use setParallaxMultiplier(float) on view's layout parameters with id relativeLayout_title.

setParallaxMultiplier changes the threshold at which parallax animation starts triggering. By default it triggers at half the parent height, equivalent of setting the value of 0.5f.

Source

Answer 3

Dry

After looking into CollapsingToolbarLayout's implementation, you may see, that content scrim is appearing when CollapsingToolbarLayout height gets lower than its minimum height x 2 + "status bar height":

if (mContentScrim != null || mStatusBarScrim != null) {
    setScrimsShown(getHeight() + verticalOffset < getScrimTriggerOffset() + insetTop);
}

and here is getScrimTriggerOffset implementation:

final int getScrimTriggerOffset() {
    return 2 * ViewCompat.getMinimumHeight(this);
}

Unfortunately setting minHeight property won't work, because this piece of code will overwrite it during onLayout:

if (mToolbarDirectChild == null || mToolbarDirectChild == this) {
    setMinimumHeight(getHeightWithMargins(mToolbar));
} else {
    setMinimumHeight(getHeightWithMargins(mToolbarDirectChild));
}

Solution

Extend CollapsingToolbarLayout and after onLayout call setMinimumHeight. You may also use the following implementation with setContentScrimHeight method:

import android.content.Context;
import android.support.design.widget.CollapsingToolbarLayout;
import android.util.AttributeSet;

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private int contentScrimHeight;

    public MyCollapsingToolbarLayout(Context context) {
        super(context);
    }

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        super.setMinimumHeight(contentScrimHeight);
    }

    public int getContentScrimHeight() {
        return contentScrimHeight;
    }

    public void setContentScrimHeight(int contentScrimHeight) {
        this.contentScrimHeight = contentScrimHeight;
        requestLayout();
    }
}