CollapsingToolBarLayout, toolbar and menus

Question

I'm trying to get the menu on the toolbar for my app.

Currently, I have a CollapsingToolbarLayout. When the user moves up the recyclerview, the image of an island reduces in size and then eventually it collapses into the toolbar.

This is what it looks like when it is expanded:

This is what it looks like when it has collapsed:

Now, you can see that when it is expanded, the heart icon is duplicated (once in the FAB and once in the toolbar. I only want the heart icon to appear in the toolbar when the FAB is no longer visible otherwise, I feel that it will be confusing to a user when you have two buttons on the screen that does exactly the same thing.

How can I only show the heart icon on the toolbar when the collapsingToolBarLayout is fully collapsed? I tried to look for some type of onCollapse listener but no luck.

This is the code for the xml:

   <android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:id="@+id/appbar"
        android:layout_width="match_parent">
<!--        android:fitsSystemWindows="true"-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"

            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="16dp"
            app:expandedTitleMarginEnd="32dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/ocean395"
                app:layout_collapseMode="pin" />

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

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

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

score 1 · Answer 1 · edited May 23 '17 at 12:17

hey you can add the listener like this

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()) {
            // Collapsed (make button visible and fab invisible)
        } else if (verticalOffset == 0) {
            // Expanded (make fab visible and toolbar button invisible)
        } else {
            // Somewhere in between
        }
    }
}););

referred from How can i determine that CollapsingToolbar is collapsed?

CollapsingToolBarLayout, toolbar and menus

1 Answers1