One of the best Material Design’s component is the Collapsing Toolbar. Many android apps use this concept as it brings simplicity, elegance and beauty to the screen. Using images is a great practice in general, mobile screens are much smaller so less images can fit in. Showing an image as the main header and collapsing it when the user scrolls, allows us to show more above the fold content in less space.
Making long story short, this is the final result…
 |
 |
Elements we Need
The implementation is straight forward, we use the following elements in order to create the full layout:
- CoordinatorLayout – the top level screen element
- AppBarLayout – the element to handle the scrollings
- CollapsingToolbarLayout – this element contains the image and the toolbar to collapse/expand
- ImageView – a regular image placeholder
- Toolbar – material design app toolbar
- NestedScrollView – defines a scrollable area on the screen
Special Properties
We specify the height of the toolbar when it’s open:
android:layout_height=“192dp“
We set the scrolling effect attribute:
app:layout_scrollFlags=“scroll|exitUntilCollapsed“
We set the image animation to be parallax and set the translation multiplier on the transition:
app:layout_collapseMode=“parallax”
app:layout_collapseParallaxMultiplier=“0.7“
We set the toolbar to stay pinned to the top of the screen when the layout is fully collapsed
app:layout_collapseMode=“pin“
All the rest of the page content will go inside this element, this content will be scrollable:
android.support.v4.widget.NestedScrollView
The text automatically shrinks as the CollapsingToolbarLayout is collapsing.
Take a look at the animation here
Cheers
