A Parallax header for your RecyclerView using a CoordinatorLayour Behavior (Android Development)

Benjamin Mayrargue
Aug 6, 2018 · 3 min read

Sometimes you have to build standard UI things, but for an unexplained reason, noone seems to have built it right before you (except the vendor).

It just happend last week. I am building the Android version of an iOS app, where the main page has a fixed toolbar+header, then a list view with its own collapsing header.
Well as strange as it can be, this UI seems impossible to build using standard Android support library layouts and views: the collapsible header for a listview have to be a collapsing toolbar. But this UI already has a fixed toolbar and other fixed ui elements below it!

So today i’m sharing with you a modern way to create and collapse the header of a RecyclerView using the power of Coordinator Layour behaviors.


This solution is one solution among others. Other open source solutions to display a header view includes using an override of RecyclerView, adding decorators, defining a custom Layout manager, or subscribing to scroll events to manually manage a header layout. They are all outdated and less powerful than this one :) But let make your own idea.

Note that the code demonstrated here is written in Xamarin C# for Android (i love C# too much). But it is easily converted to Java or Kotlin.

The problem that is solved

Scroll a header view while a RecyclerView is scrolling, simulating a header view. Optionally scrolling using a Parallax effect (or any effect you want).

The architecture of the solution

The solution’s layout contains a CoordinatorLayout with 2 childs: the 1st one is a SwipeRefreshLayout containing the RecyclerView. The 2nd one (the header view) can be any layout and will be the header layout of the RecyclerView.

We simply attach a custom CoordinatorLayout’s behavior to the header view by adding the app:layout_behavior attribute and magically the header will appear above the RecyclerView and will scroll with it !

Note: you can add a second CoordinatorLayout even if you already have one at the root of your layout. It is like a FrameLayout.

Note: it must be a CoordinatorLayout as only the direct childs of a CoordinatorLayout are searched for the attribute “app:layout_behavior”.

What is a custom behavior

A CoordinatorLayout “coordinates” its direct childs using behaviors. A behavior is a class, independant of the layouts, which can modify the UI without having to override any UI object. It’s a kind of generic View plugin.

For our solution we will create a Nested Scrolling behavior.

The ParallaxHeaderBehavior behavior

A custom behavior is a class inheriting from CoordinatorLayout.Behavior. I called it ParallaxHeaderBehavior.

You override only the methods of CoordinatorLayout.Behavior you need, and the CoordinatorLayout will call them when appropriate. They are not well documented except in the java source code of the Android Support Library. You can check https://medium.com/@zoha131/coordinatorlayout-behavior-basic-fd9c10d3c6e3 (page from which i borrow the above picture) for some explanations.

So for this custom behavior, we simply:

  • override OnStartNestedScroll to indicate that we wish to receive scroll events for vertical scrolls (otherwise the below methods are not called)
  • overrides OnNestedPreScroll to scroll the header view first (when scrolling down) or scroll the recyclerview first (when scrolling up)
  • override OnNestedFling/OnNestedScroll as flings scroll events are not sent by the CoordinatorLayout. We simply redirect the call to OnNestedPreScroll.
  • override OnLayoutChild in which we add a top padding to the RecyclerView so our header view appears in the blank space left by this padding. Note that i’m also using a SwipeRefreshLayout here, so i moved down the indicator in the same code (with the same padding).

Layout and custom behavior code :

Good luck

Hope to have comments, pics and links of what you’ve done with this code !

Happy coding !
Benjamin Mayrargue, VAPOLIA.

Note: see our fantastic XamSvg and WheelPicker nuget libraries for Xamarin and Forms! https://github.com/softlion/XamSvg-Samples

References

Benjamin Mayrargue

Written by

https://www.linkedin.com/in/benjaminmayrargue/

More From Medium

Related reads

Also tagged SVG

Also tagged SVG

Why SVGs will save us

374

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade