Animated App Bar with ConstraintLayout

Well the story started in December 2017 when I’ve seen talk from Nicolas Roard, Google & John Hoford, Google . All the credits go to them, I’ve just put everything together.

As result I’ve built something that allow you make nice animation for your app toolbar. Soon Google announced MotionLayout which made my research useless. But while we still waiting for the release and the approach work for me for last 2 years without any problems I decided to share this.

Reusable library is there

Example is there

How it works

The main idea is to utilise ability of ConstraintLayout to apply different ConstraintsSet and change the layout with animation.

First what we need is io.yamsergey.appbar.AnimatedCollapsibleAppBar from the library, it’s nothing more than ConstraintLayout which knows how to play with CoordinatorLayout.

Just add it to your CoordinatorLayout hierarchy.

Second step is to create expanded and collapsed constraints. Usually I create expanded inside the AnimatedCollapsibleAppBar like in any other ConstraintLayout.

For instance, if we have this as expanded .

Then collapsed template may look like this. We just resize the image and change it constraints to bottom.

We need collapsed just as template, means you should include only those elements which will be changed, ConstraintLayout will use ids to apply new constraints. Hence we don’t have to support 2 identical layouts. You may consider the template as a patch to initial layout.

Last thing just add reference to your collapsed template.

And you good to go. Enjoy your animated app bar.

Issues:

1. Using ConstraintLayout with different constraint sets and animation appears to be not fully compatible with DataBinding . It’s possible to use together but maybe not worth it.
2. You should keep overall heigh to be the same, it’s not necessary to be fixed height, but consider using invisible instead of gone for visibility and use some placeholders if you moving views around.

Happy coding.