Another well recognized Material design feature is the collapsing toolbar. This generally contains a relevant image and a title. This type of toolbar will fill a large proportion of the screen when the user scrolls to the top of the content, it handily tucks itself out of the way when the user wishes to view more content and scrolls down. This component serves a useful purpose, as it provides a great branding opportunity and a chance for our app to stand out visually, but it does so without using up valuable screen real estate.
A collapsing app bar
The best way to see how this is constructed is to examine the XML code behind it. Follow the steps to recreate it:
- Start a new Android Studio project. We will be creating the following layout:
Project component tree
- First open the styles.xml file.
- Ensure that the parent theme speculates no action bar, as follows...