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"/>

Ninny

Hi! did you find out what was the problem? Thanks! – Muddle

try adding attribute app:contentScrim="@color/fadecolor" in CollapsingToolbarLayout – Tiloine

Is your RecyclerView big enough to cause the scroll? – Godard

Its fade to app:contentScrim="?attr/colorPrimaryDark" – Zelmazelten

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.

Buttercup

Awarding bounty here as it answers both the scrim issue (which will fade out the content of the bar upon locking) and the gradual fade (which requires custom code as described) – Morion

Answer 2

For anyone stumbling upon this as I did and isn't satisfied with the accepted answer, as the image is supposed to fade out on its own without tinkering the code, make sure your Toolbar is the last child of your CollapsingToolbarLayout, and not your ImageView... found the answer on here. Fixed it for me.

Winder

The link results in a 404 – Hammack

Answer 3

ImageView (or whatever content) will only fade if you have give a contentScrim property like this:

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

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/toolbarColor"
        app:expandedTitleGravity="top"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!-- Whatever you want to fade content goes here. -->

        </FrameLayout>

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_collapseMode="pin"
            app:title="Your investments" />

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

Note that app:contentScrim="@color/toolbarColor" is important.

Bunni

Answer 4

I can't find your problem exactly. But here is my working code.

Try this:

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

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

        <ImageView
            android:id="@+id/ivParallax"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/my_image"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

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


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

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

<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/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

Iy