WhatsApp like collapsing toolbar Part – 2

collapsing-toolbar-android

Please visit WhatsApp like collapsing toolbar Part – 1 post if you have not visited already.

After having some basics of what we are going to use – in this post we are going to create WhatsApp like collapsing toolbar layout in few easy steps.

Below clip shows what we will have at the end.

As the name suggests – collapsing, your image will respond to up & down scrolling events. It collapses and expands with default animations.

 

1> Open your build.gradle(Module: app) and add as following in dependencies:

 

2> Take any good looking image and paste in your drawable folder. We have taken picture.jpg here.
Paste below code in your activity_main.xml.

If any attribute you are not getting why it is there please WhatsApp like collapsing toolbar Part – 1(Design support library – a glance).

 

3> Now got to menu > res>menu.xml. If menu folder is not already there, create it. Then create a menu file with name ‘menu’ and place below code to create items.

4> Styles.xml

5> Next, go to your MainActivity.java and paste below code:

Here, we have used RecyclerView which provides nested scrolling behavior. In place of it, you can also use NestedScrollView which implements NestedScrollingChild, NestedScrollingParent & ScrollView.

Create RecyclerView Adapter from below link :

The adapter is same as what we have used in Android RcyclerView (Homogeneous). So you can get adapter and model class code from there.

To get more regarding menu and menu items please visit Android Toolbar.

 

Once you are done with the adapter and model code run the project and try to integrate it in any fragment as per your need.

Output

:android-collapsing-toolbar-androidnovice

Leave a Reply

Your email address will not be published. Required fields are marked *