CollapsingToolbar scrollflags in action!!!

Android Design — Collapsing Toolbar: ScrollFlags Illustrated

Martin Ombura Jr.
Jan 31, 2018 · 6 min read

In this section we will look at CollapsingToolbar scrollflags, combining scrollflags and some considerations when implementing them.

1. ScrollFlags

There are 5 scrollflags provided, these are
scroll, expandAlways, expandAlwaysCollapsed, snap, exitUntilCollapsed.

In order to use scrollflags in your CollapsingToolbar add the following property to your CollapsingToolbar.

app:layout_scrollFlags=”<select-flag-here> 

Now let’s set up a control without any flags to see how the CollapsingToolbar behaves.

Figure 1: Control scroll behavior with no scrollflags.

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.

1.1 scroll

app:layout_scrollFlags=”scroll”
The 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.

Figure 2: app:layout_scrollFlags=”scroll”
  • If the NestedScrollView is being scrolled up, it will in turn push-up and collapse the CollapsingToolbarto the top allowing it to disappear, enabling the NestedScrollView to expand fully.
  • If the NestedScrollView is being scrolled down, it will begin to expand the CollapsingToolbar.

1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.

app:layout_scrollFlags=”enterAlways”
app:layout_scrollFlags=”enterAlwaysCollapsed”
app:layout_scrollFlags=”snap”
app:layout_scrollFlags=”exitUntilCollapsed”
app:layout_scrollFlags=”exitUntilCollapsed”

Figure 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed — all behave the same when used alone.

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 scroll and enterAlways attribute we would do something like this. app:layout_scrollFlags=”scroll|enterAlways

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.

Figure 4: scroll|enterAlways (left) vs scroll|enterAlwaysCollapsed (right)

At face value scroll|enterAlways & scroll|enterAlwaysCollapsed look identical in function. The difference occurs when the CollapsingToolbar decides to expand upon a downwardNestedScrollView scroll.

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.

Figure 5: scroll|enterAlways (left) vs scroll|snap (right)

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

Figure 6: scroll|enterAlways (left) vs scroll|exitUntilCollapsed (right)

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.

3.1 scroll|snap|exitUntilCollapsed

Figure 7: scroll|snap|exitUntilCollapsed

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.

3.2 enterAlwaysCollapsed|snap

Without the scroll flag once again, nothing really happens to the CollapsingToolbar, as a result, it remains in an expanded state despite scroll efforts.

3.3 scroll|enterAlways|enterAlwaysCollapsed

Figure 9: scroll|enterAlways|enterAlwaysCollapsed

Given our descriptions of enterAlways & 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

  1. CollapsingToolbar scrollflags depend heavily on the scrolling motion of a NestedScrollView or RecyclerView with some attached ScrollingBehavior to be able to see the effects of the scroll-flags (see article of CoordinatorLayout Behaviors).
  2. The scroll flag is key to being able to enable the CollapsingToolbar scrolling.
  3. The ordering of flags has no impact. e.g scroll|snap and snap|scroll perform the exact same function.
  4. Be wary of mixing scrollflags that may conflict with regards to their function. See section 3.3 on how enterAlways and enterAlwaysCollapsed conflict when a downward-scroll to expand the CollapsingToolbar is introduced.

Conclusion

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!

Martin Ombura Jr.

An assortment of all my articles and research in various tech, psychology and economics related fields.

Martin Ombura Jr.

Written by

Go | | Ggl Cld | Dstrbtd Cmptng | Andrd | Lnx

Martin Ombura Jr.

An assortment of all my articles and research in various tech, psychology and economics related fields.

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