Animation Collapsing Toolbar Android

Hi, guys! Let’s talk about collapsing animation on user swipe up an application interface. Bad news. There are no native collapsing avatar view for collapsing toolbar. But for You! I have preperead two amaizing avatar collapsing demo samples with approach that doesn’t use a custom CoordinatorLayoutBehavior!

demo 1

demo 2

You can view all code on my github repo CollapsingAvatarToolbarSample.

So let me to explaine the code. Instead of use use a custom CoordinatorLayoutBehavior i use an OnOffsetChangedListener which comes from AppBarLayout.

Here’s a snippet. In updateViews method i change views via calculated offset:

Avatar animate demo 1

In first demo for animate collapsing avatar need detect when avatar have gone to top and begin to collapse.

So, need to find avatarAnimateStartPointY and avatarCollapseAnimationChangeWeight (for convert general offset to avatar animate offset):

To convert general offset to avatr change offset using avatarCollapseAnimationChangeWeight :

So in updateViews method look how avatar change the size with change avatar’s X, Y position translation:

Avatar animate demo 2

In demo 2 avtar change his size and than animate move to right at one moment with top toolbar text became to show and moving to left.

You need to track states: TO_EXPANDED_STATE changing, TO_COLLAPSED_STATE changing, WAIT_FOR_SWITCH.

Create animation for avatar on state switch change:

View samples on GitHub https://github.com/SergeyBurlaka/CollapsingA

Hope you have enjoyed reading the article and grabbed a lot from this. If you did, then please don’t forget to give claps on this articles.

Happy Coding!!