How to hide FloatingActionButton which is anchored to BottomAppBar when the is hidden on scroll

Question

I am trying to hide the FloatingActionButton when the BottomAppBar is hidden when due to NestedScrollView scrolling. The BottomAppBar hides successfully when app:hideOnScroll="true" is set, but the FloatingActionButton stays visible. My layout looks like this:

<androidx.coordinatorlayout.widget.CoordinatorLayout> 

<androidx.core.widget.NestedScrollView
    android:id="@+id/nested_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
   >

   ...

</androidx.core.widget.NestedScrollView>

<com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="88dp"
        android:layout_gravity="bottom"
        android:layout_marginHorizontal="16dp"
        android:layout_marginVertical="8dp"
        app:backgroundTint="@color/colorWhite"
        android:requiresFadingEdge="vertical"
        app:fabCradleRoundedCornerRadius="16dp"
        app:fabCradleMargin="16dp"
        app:fabCradleVerticalOffset="16dp"
        app:hideOnScroll="true"
        >
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            app:menu="@menu/bottom_menu"
            app:elevation="0dp"
            app:labelVisibilityMode="labeled"
            android:background="@android:color/transparent"
            app:itemTextColor="@color/colorPrimaryApp"
            app:itemIconTint="@color/colorPrimaryApp"
            app:itemBackground="@drawable/bvn_transparent_light_blue_color_selector"
            android:layout_marginEnd="16dp"
            />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bnv_add"
        android:tint="@color/sky"
        android:backgroundTint="@color/sky"
        app:layout_anchor="@+id/bottomAppBar"
        tools:ignore="ContentDescription"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Is there some no hacky way to do it?

Answer 1

I managed to hide the FloatingActionButton using some hacks, like this:

    val point = Point()
    val startSize = fab.customSize
    nested_view.viewTreeObserver.addOnScrollChangedListener {
        windowManager.defaultDisplay.getSize(point)
        when {
            bottomAppBar.y + bottomAppBar.measuredHeight > point.y ->
                { fab.customSize = 1; fab.alpha = 0.0f}
            else ->
                { fab.customSize = startSize; fab.alpha = 1f}
        }
    }

But I do not like it :) and it acts a bit strange:

click here to see video