ImageView not fading in CollapsingToolbarLayout

Question

I am trying to get a fading effect on the ImageView when collapsing the AppbarLayout but the image still remains. I have read other solutions but its not working for me. I cant seem to find what is wrong with the code.

<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayoutProfile"
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:fitsSystemWindows="true"
tools:context="com.bolt.citywatch.ui.fragment.ProfileFragment">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/profile_image"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_email_white"
            app:layout_collapseMode="parallax"/>


        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Answer 1

If everything is working fine for you but you just need the image to fade as the AppBarLayout collapses, you can set up an addOnOffsetChangedListener that will detect how much the app bar has closed. So, when the app bar is 100% open, the alpha value of the image will be set to 255 (opaque) assuming that we are using setImageAlpha() of ImageView and transparent (zero) when the app bar is completely closed. (See here).

Here is the code snippet to make this happen. I place it in onCreate() of the activity:

final ImageView profileImage = findViewById(R.id.profile_image);
final AppBarLayout appBarLayout = findViewById(R.id.appBar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        float range = (float) -appBarLayout.getTotalScrollRange();
        profileImage.setImageAlpha((int) (255 * (1.0f - (float) verticalOffset / range)));
    }
});

Here is an example of the results:

If this is not exactly what you are looking for, you can also consider contentScrim, scrimAnimationDuration and scrimVisibleHeightTrigger of CollapsingToolbarLayout.