CollapsingToolbarLayout - Hide ImageView when Expanded, show when Collapsed

Question

I would like to hide an ImageView (logo) when CollapsingToolbarLayout is expanded and only show the ImageView when the CollapsingToolbarLayout is collapsed. (I know how to do the reverse of this question).

As you can see from the screenshot below. The big mast head is actually one big logo, image on left and then company name on right. In collapsed mode I only want to show a small thumbnail of the logo.

How can I accomplish this in XML or code please? Code & screenshots below:

<android.support.design.widget.CoordinatorLayout
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:scaleType="fitCenter"
android:adjustViewBounds="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbarlayout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="@color/colorPrimary">

        <ImageView
            android:id="@+id/mast_logo_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9"
            android:src="@drawable/uj_logo_rectangle_orange_background" />


        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:contentInsetStart="40dp"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:orientation="horizontal"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/thumbnail_logo_main"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_marginTop="50dp"
                android:layout_marginLeft="10dp"
                android:src="@drawable/uj_rgb_logo_01" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="4">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:paddingTop="20dp"
                    android:layout_marginLeft="10dp"
                    android:textSize="20sp"
                    android:textColor="#fff"
                    android:textStyle="bold"

                    android:text="Courses &amp; Programmes"/>

                <android.support.v7.widget.SearchView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="57dp"
                    android:layout_height="40dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="50dp"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    android:src="@drawable/empty_avatar" />

            </LinearLayout>

        </LinearLayout>

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

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

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

Answer 1

Follow the below code:

AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // If collapsed, then do this
                imageViewBigLogo.setVisibility(View.GONE);
                imageViewSmallLogo.setVisibility(View.VISIBLE);
            } else if (verticalOffset == 0) {
                // If expanded, then do this
                imageViewBigLogo.setVisibility(View.VISIBLE);
                imageViewSmallLogo.setVisibility(View.GONE);
            } else {
                // Somewhere in between
                // Do according to your requirement
            }
        }
    }););

Thanks to this.

Answer 2

In My code I will try this:

AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            //visible image view
            isShow = true;
        } else if (isShow) {
            //invisible image view
            isShow = false;
        }
    }
});