Collapsing Toolbar like Whatsapp Profile in Material Design – Android

Collapsing toolbar like Whatsapp is related to Whatsapp Profile Page. Collapsing Toolbar Layout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of an AppBarLayout. You can easily create collapsing toolbar layout using Android Design support library.

To optimize collapsing toolbar height, width & precollapse height we have to use some java tweaks. Like in the WhatsApp they are using square image & WhatsApp maintains a height of the image indistinct resolution devices.
I’ve mentioned some steps to design Collapsing toolbar layout like WhatsApp. Below mentioned screenshots showing collapsing toolbar i.e. Initially collapsed & Fully Expended Toolbar in Whatsapp.


Step: 1  (Collapsing toolbar like Whatsapp)

First of all, for collapsing toolbar layout, you have to add Design Support Library in your project. Android Support and Android Design Library will provide all the components, Which needed to create or Implement the same WhatsApp profile or Collapsing toolbar. Add dependencies to build.gradle –

Above defined dependencies are quite latest so can use your version of dependencies.


Now in activity file where you are creating collapsing toolbar create Coordinator Layout & put other child layouts as mentioned in code-

*Content main layout is a content of this activity may be having some Recycle views or Card views as per application requirements. In any aspect, we have to create Activity for above-mentioned XML.

Step: 3

Now got to activity file (Java) where you have defined your layout.

In the above code, I’m changing toolbar color as per the matching of Image as using Palette.

Also Maintaining height dynamically of an image in distinct resolution devices. (Collapsing toolbar like Whatsapp)

And the precollapse height of Collapsing toolbar using set offset bar method (One-third part will be collapsed).

Now you have created Collapsing Toolbar layout like Whatsapp. This is the most common UI for Material Design Android theme. If face any issue please comment.

(Collapsing toolbar like Whatsapp)

How to Bypass SSL on Android when device say No Peer Certificate found. Please visit: No Peer Certificate Found on Android

Android gzcompression visit: Android gzcompress

I’m Dipendra, software developer, and designer who has written code in many of the language known to mankind.Passionate about Technology. In my free time, I love to write articles and build the code.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer