Showing and hiding BottomAppBar on scroll

Question

I'm trying to implement BottomAppBar where I would handle the navigation of a WebView.

<androidx.coordinatorlayout.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"
tools:context=".MainActivity">

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

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_behavior="com.google.android.material.bottomappbar.BottomAppBar$Behavior"
        app:hideOnScroll="true"
        app:fabAttached="true"
        app:fabAlignmentMode="end"
        app:layout_scrollFlags="scroll|enterAlways"/>

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_share"
    android:tint="#fff"
    app:layout_anchor="@id/bottom_bar"
    app:backgroundTint="@color/colorPrimary"/>

Everything works fine but I want to be able to show and hide the BottomAppBar when the users scrolls down and up respectively just as is the behavior here.

I couldn't find a tutorial on that anywhere so has someone implemented a solution on it?

Answer 1

Try settting app:hideOnScroll without setting app:layout_behavior or app:layout_scrollFlags. And remove the AppBarLayout parent view so the BottomAppBar is just a direct child of the CoordinatorLayout.