Material Design checklist: hiding app bar on scroll?

11
votes

Per the new Android Material Design checklist:

http://android-developers.blogspot.com/2014/10/material-design-on-android-checklist.html

Where appropriate, upon scrolling down, the app bar can scroll off the screen, leaving more vertical space for content. Upon scrolling back up, the app bar should be shown again.

I realize there are lots of questions/answers to implement this behavior for the ICS-style app bar, but I'm curious if the new Toolbar widget or Lollipop/AppCompat 21 have introduced a more standard way of achieving this effect.

2
androidandroid-5.0-lollipopmaterial-design
I have not seen anything in the documentation that suggests there is a built in method to hide the toolbar but since all it is, is a regular view just apply an animation to the toolbar when scrolling in either direction – tyczj

2 Answers

6
votes

Per Roman Nurik on Google+ (essentially what @tyczj mentioned)

https://plus.google.com/u/0/+RomanNurik/posts/3G8zYvN5oRC

It's not built in but relatively simple to implement. Just observe scrolling and animate the Y translation. Could also use the "quick return" sample +Nick Butcher​ and I published a few years ago

I believe that example referenced is: https://code.google.com/p/romannurik-code/source/browse/misc/scrolltricks

UPDATE: I also just discovered a great library that does this, along with some other great tricks https://github.com/ksoichiro/Android-ObservableScrollView

0
votes

Ref: https://material.io/develop/android/components/app-bars-bottom

hiding app bar on scroll:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"

    app:hideOnScroll="true"

    app:navigationIcon="@drawable/ic_menu_color_control_normal_24dp"
    app:navigationContentDescription="Navigation icon"
    android:fitsSystemWindows="true"
    />

Kotlin: programmatically

  bottomAppBar.hideOnScroll = true