Android Design — Collapsing Toolbar: ScrollFlags Illustrated
In this section we will look at
CollapsingToolbar scrollflags, combining scrollflags and some considerations when implementing them.
There are 5 scrollflags provided, these are
In order to use scrollflags in your
CollapsingToolbar add the following property to your
Now let’s set up a control without any flags to see how the
As you can see, from Figure 1, nothing special happens, the
NestedScrollView scrolls freely under the
CollapsingToolbar as the CollapsingToolbar stays in an expanded state. This is ideal if you have a View in your
CollapsingToolbar that should always remain expanded and visible.
scroll flag allows the
NestedScrollView(i.e the underlying view encompassing all the content e.g text-paragraphs and image) to signal to the
CollapsingToolbar that it is in a scrolling state.
- If the
NestedScrollViewis being scrolled up, it will in turn push-up and collapse the
CollapsingToolbarto the top allowing it to disappear, enabling the
NestedScrollViewto expand fully.
- If the
NestedScrollViewis being scrolled down, it will begin to expand the
1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.
On their own, each of the four flags above behave similarly to our control. At this point you’re probably wondering why aren’t they different? To see their differences we must combine them with the
scroll flag mentioned in Section 1.1 above.
2. Combining ScrollFlags
ScrollFlags can be combined to leverage the unique motion from multiple behaviors. To combine scrollflags we just include them separated by the vertical bar character | e.g. To combine the
enterAlways attribute we would do something like this.
Let’s look at some examples. In Section 1, we saw that the
scroll flag was the only one that did something of significance. Lets combine it with the others flags and see if we get anything different.
2.1 scroll|enterAlways vs scroll|enterAlwaysCollapsed
The differences between the two are subtle, pay attention to what happens on a downward scroll.
At face value
scroll|enterAlwaysCollapsed look identical in function. The difference occurs when the
CollapsingToolbar decides to expand upon a downward
scroll|enterAlways: Has an eager approach to how soon the
CollapsingToolbar expands during an downward scroll. Meaning once there is an downward scroll, this flag will begin to expand the
CollapsingToolbar regardless of how far up the
NestedScrollView has scrolled.
scroll|enterAlwaysCollapsed: Has a lazy approach to how soon the
CollapsingToolbar expands during an downward scroll. Meaning the moment there is an downward scroll, The
CollapsingToolbar will only expand once the
NestedScrollView has scrolled to the top of its content.
2.2 scroll|enterAlways vs scroll|snap
Now that we know what
scroll|enterAlways does, let’s contrast it to
scroll|snap: The difference here is more apparent.
snap will always try and set the
CollapsingToolbar to either a collapsed or expanded state depending on where the
CollapsingToolbar collapsed or expanded to. (I think its best left to the illustration to define it).
2.2 scroll|enterAlways vs scroll|exitUntilCollapse
scroll|exitUntilCollapsed: This is the only scrollflag that will ensure the Toolbar remains at the top and doesn’t disappear on scroll. This flag also behaves similar to the
enterAlwaysCollapsed flag as it only expands the
CollapsingToolbar once the
NestedScrollView approaches the top of its content.
3. Combining even more flags.
Playing around with flags is low-key addictive, lets combine more of them! Before you watch the videos, try guess what the flags might do, to see if you really understand the nuances between the two.
This combination works well, as it allows the
CollapsingToolBar to snap depending on the scroll intensity, however a “full” upward-scroll will always terminate with the
Toolbar visible at the top.
scroll flag once again, nothing really happens to the
CollapsingToolbar, as a result, it remains in an expanded state despite scroll efforts.
Given our descriptions of
enterAlwaysCollapsed in Section 2.1 above, they behave very differently. As a result the app gets quite confused as to how to handle downward-scrolls. I would recommend not to use this
4. ScrollFlags Observations & Considerations
CollapsingToolbarscrollflags depend heavily on the scrolling motion of a
RecyclerViewwith some attached
ScrollingBehaviorto be able to see the effects of the scroll-flags (see article of CoordinatorLayout Behaviors).
scrollflag is key to being able to enable the
- The ordering of flags has no impact. e.g
snap|scrollperform the exact same function.
- Be wary of mixing scrollflags that may conflict with regards to their function. See section 3.3 on how
enterAlwaysCollapsedconflict when a downward-scroll to expand the CollapsingToolbar is introduced.
ScrollFlags are essential to giving your
CollapsingToolbar some personalized character. As we’ve seen, there are several ways of combining flags to get distinct outcomes that can enhance our apps visual aesthetic and better promote our business rules. We’ve also seen some flags when combined can clash and give a negative experience to your users.
Be creative and try out some different scrollflag combos for your app!
Thanks again for reading!
Check out my other article on
CoordinatorLayout Behaviors to learn how to create your own!