Listen to offset changes (collapsing/expanding) of AppBarLayout to change toolbar's background in Kotlin

Question

I am making a custom Collapsing Toolbar Layout. The collapsing part is finished, the toolbar has been adjusted accordingly. The only thing that is missing is that I want to change my Toolbars background as the Collapsing Toolbar Layout is collapsing, i.e. gradually increase the opacity of my Toolbars background.

I've seen a lot of answers that seemingly do what I want in Java. Unfortunately, I have no basics (at all) in Java and the one that makes the most sense is here: here. I tried pasting said code to my Android Studio IDE and it doesn't work (it's not really overriding anything). For reference, the code of said post is here:

@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));
   }

I similarly want to do that, i.e. I want to be able to listen to the Y-offset of my AppBarLayout to gradually change my Toolbars background.

I have the following activity_xml file (just in case):

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout ...>

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_collapsing_toolbar"
            app:collapsedTitleTextAppearance="@style/CollapsedCollapsingToolbarText"
            app:expandedTitleTextAppearance="@style/ExpandedCollapsingToolbarText"
            app:layout_scrollFlags="exitUntilCollapsed|scroll">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bg_collapsing_toolbar"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.75" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.Light">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        ... />

                    <ImageView
                        ... />

                    <ImageView
                        ... />

                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How do I listen to some AppBarLayout offset changes so that I can gradually change my Toolbars background as the Collapsing Toolbar Layout is collapsing in Kotlin?

score 3 · Accepted Answer · answered Dec 03 '19 at 07:43

Try this.

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, 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));
        })

Listen to offset changes (collapsing/expanding) of AppBarLayout to change toolbar's background in Kotlin

1 Answers1