Before making this WhatsApp like collapsing toolbar layout we will take a glance at basic components of design support library which will be used in making this layout.
With Design Support Library google made all those motions easier to implement which were introduced with material design. We all have seen in whatsapp how your contact’s profile pic is being displayed and once you scroll up, it will be converted into a toolbar.
To implement this kind of stuffs we need to know regarding scrollable regions on our mobile screens. These are:
Now let us have a look at basic components of layout we are going to use.
As the name suggests it provides coordination between the children contained in it. It is actually frame layout with some extra abilities.
It serves basically for two purposes – As a top level/root layout and parent for interaction between children.
We can define some behavior in the children of this layout(Views) to specify how they will react with each other and with this parent. Behavior may include Scrolling, swipping etc. E.g. When a snackbar is shown floating action button should move bit upward and when snackbar disappears floating action button should move bit downward.
It is a broader extension to generalize appbars. It is an extension to vertical linear layout. It should be direct child of CoordinatorLayout to get all scrolling and animation effects. AppBarLayout behaves as a wrapper for other child views like toolbar or TabLayout, etc. AppBarLayout allows its children to react to scroll, when AppBarLayout’s sibling scrolls. But this sibling should have a “layout_behaviour” attribute which we will see while making the layout.
E.g. When a list of chats is scrolled down in whatsapp you may have observed that toolbar is scrolled to off screen but tabs(call, chats, contact) stays pinned to top and when list is scrolled up toolbar reappear above tabs layout.
So, we can say that toolbar and tablayout which are children of appbarlayout are reacting to scrolls of list which is immediate sibling to AppBarLayout as shown in below structure.
<Any nested scrollable view
layout_behaviour = “@string/appbar_scrolling_view_behavior”
On setting this attribute to nested scrollable view, it will bind this element with AppBarLayout, so that it will come to know regarding scrolling and the behavior to perform on scrolling.
It acts as a wrapper for toolbar. It should be the direct child of AppBarLayout. There are some attributes we should focus on like “contentScrim” which defines the color of toolbar when it is fully collapsed. We will see more of this while its implementation in next part.
These flags defines the behavior of view in response to scroll.
This flag can work alone but is required with other flags to take them into the effect.
The view will be scroll in direct relation to scroll events. Here, if you are scrolling towards bottom of the list then your view containing this flag(e.g. toolbar) will hide off the screen.And once you scroll towards top of the list your view will not appear until you reach the top end. If you don’t use this flag your view will remain pinned to the top.
This flag is responsible to give quick return move when any downward scroll occurs. It returns from off screen immediately when any downward scroll occurs.
As its name suggests it has two effects:
enter always -> As discussed above
collapsed -> If you have provided minHeight to the view then view will enter with minHeight in response to the down scroll.
And when the scrolling view reaches the top then your view will expand to its full height.
While scrolling towards bottom, the view with this flag will be scrolled until it is collapsed.
It works like rounding of value, e.g if x>=1.5, we may round off it to 2 or if x<1.5, we may round it off to 1.
Same way, if a view is partially visible, the view will be scrolled off screen completely and if the view is partially hidden then it will be scrolled to display fully.
This attribute of children of the collapsing toolbar layout specifies the collapsing behaviour on scrolling.
pin: The view will pin in place until it reaches the bottom of the collapsing toolbar layout.
parallax: the scrolling of the view will be in parallax fashion.
none: view acts as normal without any collapsing behavior.