Handling Scrolls with CoordinatorLayout

[nesquena]

Building off of #78, we need guides for coordinating using the new CoordinatorLayout:

• Scrolling up or down the floating action button slides up and down (See guide)
• CoordinatorLayout - a layout which provides an additional level of control over touch events between child views
  • A great use of this is when you add a FloatingActionButton as a child of your CoordinatorLayout and then pass that CoordinatorLayout to your Snackbar.make() call - instead of the snackbar displaying over the floating action button, the FloatingActionButton takes advantage of additional callbacks provided by CoordinatorLayout to automatically move upward as the snackbar animates in and returns to its position when the snackbar animates out
  • CoordinatorLayout also provides an layout_anchor attribute which, along with layout_anchorGravity, can be used to place floating views, such as the FloatingActionButton, relative to other views.
• AppBarLayout - allows your Toolbar and other views (such as tabs provided by TabLayout) to react to scroll events in a sibling view marked with a ScrollingViewBehavior
  • app:layout_behavior and app:layout_scrollFlags
• CollapsingToolbarLayout
  • Affords detailed control on how different elements react to collapsing
  • CollapsingToolbarLayout’s app:layout_collapseMode="pin"
  • app:layout_collapseMode="parallax" and app:layout_collapseParallaxMultiplier="0.7"
  • app:contentScrim="?attr/colorPrimary"
• Setup ToolBar to show and hide as you scroll.
• Header of the list docks to top of the screen

References:

• http://hmkcode.com/material-design-app-android-design-support-library-appcompat/
• http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
• https://github.com/chrisbanes/cheesesquare
• https://www.bignerdranch.com/blog/becoming-material-with-android-design-support-library/

[rogerhu]

Funny, it just got committed 2 days ago:

https://plus.google.com/+IanLake/posts/Pxx1srKMVqi
ianhanniballake/cheesesquare@aefa8b5

[nesquena]

Nice reference! I'd want to produce this in a guide form too. It's such a common effect, I get asked by engineers how to do this a lot.

[rogerhu]

FYI -- CoordinatorLayout only works with RecyclerView, not ListView. I'm in the process of trying to figure out how this works.

https://plus.google.com/101784949561498190574/posts/KPbsTY4NANx

[nesquena]

Thanks for the update. This is an interesting a tutorial: http://hmkcode.com/material-design-app-android-design-support-library-appcompat/ (see coordinator section). A guide on how to get coordinatorlayout working along with AppBarLayout and CollapsingToolbarLayout (and what they each do) would be really useful.

[rogerhu]

Yeah my problem is that they don't explain what's going on...Apparently there are pre-defined Behavior's (Floating Action Button Bars know how to deal with Snackbars in the default FloatingActionBehavior) and the code examples all presume you use AppBarLayout.. forking https://android.googlesource.com/platform/frameworks/support.git/ seems to show that we're missing a bunch of files that would normally tell us how this all works. Fortunately Android Studio uses IntelliJ 13 and supports decompiling Java classes now...otherwise it would be a complete mystery.

[nesquena]

I agree this is all totally under explained which is odd and there's no good explanation anywhere. Conversely this is an opportunity to have the only clear guide on this once we figure it out :)

[rogerhu]

CoordinatorLayout with FAB described here -- https://github.com/codepath/android_guides/wiki/Floating-Action-Buttons#animating-the-floating-action-button

[rogerhu]

Started guide here:

https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout

Will add AppBarLayout and stuff soon.

[nesquena]

This looks like a great start to the handling scrolls guide, thanks!

[rogerhu]

Second pass updated.

[nesquena]

This looks awesome Roger. Seriously thanks for putting all this together!

[rogerhu]

CoordinatorLayout with Floating Action Buttons just got 10x more easier with show() and hide() methods that handle the fade-in/fade out effects instead of reimplementing the animation code.