android - CollapsingToolbarLayout: custom contentScrim similar to Facebook -

i want create custom contentscrim collapsingtoolbarlayout. collapsingtoolbarlayout has imageview inside. when scrolls, in theory imageview suppose fade out , scrim color suppose fade in.

we know can create scrim 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 android default scrim seems start working when scroll 3/4 screen. before point, imageview still shown. when reach 3/4 of screen, scrim kicks in , automatically changes color of collapsingtoolbarlayout scrim color:

instead of having fill screen when scroll 3/4 of way , before reached toolbar, want fade gently till scrolled toolbar.

if want see example of effect want create, have @ facebook app. facebook app when collapsingtoolbarlayout expanded:

when scroll 3/4 of way down, collapsingtoolbarlayout has faded blue color , blue not saturating:

so have create following inside 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 backdrop imageview holds picture displayed inside collapsingtoolbarlayout , in front of imageview holds 'scrimcolor' ?attr/colorprimary alpha of 0 backdrop imageview shine through.

then implemented appbarlayout's onoffsetchangedlistener:

@override public void onoffsetchanged(appbarlayout appbarlayout, int verticaloffset) {      fading_backdrop.setimagealpha(verticaloffset);     fading_backdrop.invalidate(); } 

we setting alpha of fading_backdrop appear when scroll up. i'm trying create scrim artifically.

however, doesn't seem work properly. there no fading @ when run code. know i'm doing wrong?

this how managed create custom scrim, seems used in quite few apps nowadays - if @ facebook, see not use standard contentscrim collapsingtoolbarlayout. code below duplicates facebook in app.

you must set appbarlayout.onoffsetchangedlistener activity , use following code below measure size of toolbar , size of appbarlayout.

when listener called, verticaloffset measures offset of collapsingtoolbarlayout when expanded point when touches pinned toolbar. therefore, verticaloffset excludes height of toolbar. compare apples apples, need exclude toolbar height height of appbarlayout when divide verticaloffset totalheight, neither verticaloffset nor totalheight contains toolbar height. necessary in order obtain percentage apply 255 alpha value to.

  @override     public void onoffsetchanged(appbarlayout appbarlayout, int verticaloffset) {          //measuring 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 scroll now, fading_backdrop gradually gain alpha when scroll upwards overlays nicely image in collapsingtoolbarlayout, similar facebook custom contentscrim.