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?

Check out [this](https://stackoverflow.com/a/42631543/7915814) question, it's for `BottomNavigationView` but I think it's applicable to you — Suleyman, May 16 '18 at 19:55

score 8 · Answer 1 · answered May 17 '18 at 16:34

8

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.

answered May 17 '18 at 16:34

Cameron Ketcham

7,966
2
28
27

You should also put the content (in this case your ConstraintLayout) in a NestedScrollView. That's what allows the CoordinatorLayout to receive the scroll events and dispatch to the BottomAppBar behavior which will hide it. – Cameron Ketcham May 22 '18 at 15:42
@Cameron, can you please share code fragments to help me understand better? I have a RecyclerView inside ConstraintLayout inside a Fragment, which site in a FrameLayout. How do I use NestedScrollView here? – kilokahn Aug 10 '18 at 05:09
2

You need to have a `CoordinatorLayout`, with the `RecyclerView` (or something that implements `NestedScrollingChild`) and the `BottomAppBar` as direct children. Then you just set `app:hideOnScroll` on the `BottomAppBar` to enable that feature. Does that make sense? – Cameron Ketcham Aug 10 '18 at 18:25

score 0 · Answer 2 · answered Sep 13 '20 at 09:24

0

HideOnScroll does not work with ScrollView instead, use NestedScrollView.

answered Sep 13 '20 at 09:24

ABHISHEK AMRUTE

11
3

score 0 · Answer 3 · answered Oct 12 '22 at 10:27

you can use this, when you wont to hide or show your BottomNavigationView or BottomAppBar add one of this line in your method of Scrolling :

..
int height = bottomAppBar.getHeight();

//Hide
bottomAppBar.clearAnimation();
bottomAppBar.animate().translationY(height).setDuration(200);
//Show
bottomAppBar.clearAnimation();                    
bottomAppBar.animate().translationY(0).setDuration(200);
..

Showing and hiding BottomAppBar on scroll

3 Answers3

Linked