CollapsingToolbarLayout: custom contentScrim similar to Facebook

Question

I want to create a custom contentScrim for my collapsingToolbarLayout. My collapsingToolbarLayout has an imageview inside. When it scrolls, in theory the imageview is suppose to fade out and my scrim color is suppose to fade in.

We all know we can create a scrim like this:

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:contentScrim="?attr/colorPrimary"
                android:background="@color/white"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp"
                android:fitsSystemWindows="true"
                app:expandedTitleTextAppearance="@color/transparent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                >

However the android default scrim only seems to start working when you scroll 3/4 up the screen. Before you that point, the imageview is still fully shown. Also when you reach 3/4 of the screen, the scrim kicks in and automatically changes the color of the collapsingtoolbarlayout to your scrim color:

Instead of having it fill the screen fully when you scroll 3/4 of the way up and before we reached the toolbar, I want it to fade gently till your scrolled up to the toolbar.

If you want to see an example of the effect I want to create, have a look at the Facebook app. This is the Facebook app when the collapsingToolbarLayout is fully expanded:

When you scroll to about 3/4 of the way down, the collapsingToolbarLayout has a faded blue color and the blue is not completely saturating:

So I have create the following inside my collapsingToolbarLayout:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frame_picture">

        <com.customshapes.SquareImageView
            android:id="@+id/backdrop"
            android:contentDescription="@string/photo"
            android:transitionName="@string/transition"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            />

        <com.customshapes.SquareImageView
            android:id="@+id/fading_backdrop"
            android:layout_width="match_parent"
            android:background="?attr/colorPrimary"
            android:layout_height="240dp"
            android:alpha="0"
            android:fitsSystemWindows="true"
            />

    </FrameLayout>

The framelayout comprises of the backdrop imageview which holds the picture that is displayed inside my collapsingToolbarLayout and in front of it is an imageview which just holds the 'scrimColor' ?attr/colorPrimary with an alpha of 0 so that the backdrop imageview will shine through.

Then I implemented the appBarLayout's onOffsetChangedListener:

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

    fading_backdrop.setImageAlpha(verticalOffset);
    fading_backdrop.invalidate();
}

We are setting the alpha of the fading_backdrop so that it will appear when we scroll up. I'm trying to create a scrim artifically.

However, this doesn't seem to work properly. There is no fading at all when I run this code. Does anyone know what I'm doing wrong?

Answer 1

This is how I managed to create a custom scrim, which seems to be used in quite a few apps nowadays - if you look at Facebook, you will see they do not use the standard contentScrim for their collapsingToolbarLayout. The code below duplicates what Facebook does in their app.

You must set a AppBarLayout.OnOffsetChangedListener to your activity and then use the following code below to measure the size of the toolbar and the size of the appBarLayout.

When your listener is called, the verticalOffset actually measures the offset of the collapsingToolbarLayout from when it is fully expanded to the point when it touches the pinned toolbar. Therefore, the verticalOffset EXCLUDES the height of the toolbar. To compare apples with apples, we need to also EXCLUDE the toolbar height from the height of the appBarLayout so that when we divide the verticalOffset by the totalHeight, neither the verticalOffset nor the totalHeight contains the toolbar height. This is necessary in order to obtain a percentage to apply your 255 alpha value to.

  @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

        //measuring for alpha
        int toolBarHeight = toolbar.getMeasuredHeight();
        int appBarHeight = appBarLayout.getMeasuredHeight();
        Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
        fading_backdrop.getBackground().setAlpha(255 - Math.round(f));
   }

When you scroll now, the fading_backdrop will gradually gain alpha when you scroll upwards so that it overlays nicely with the image in the collapsingToolbarLayout, similar to the facebook custom contentScrim.