Creating awesome animations using ConstraintLayout and ConstraintSet — part I

In this series, I’ll be talking more about creating cool animations using ConstraintSet.

New!

Also a Droidcon Boston 18 talk!

That’s me talking about this :-P

Pit stops

• Creating awesome animations using ConstraintLayout and ConstraintSet — part I
  [more about ConstraintSet animation, a small example, how it works and some heads-up] (you’re here)
• Creating awesome animations using ConstraintLayout and ConstraintSet — part II
  [little bigger example, adding transition]
• Creating awesome animations using ConstraintLayout and ConstraintSet — part III
  [solving a UI challenge, FAQs]

Prerequisites

• Android app development basics
• Kotlin
• Constraint layout

Introduction

I watched a video on ‘Keyframe animations using constraint layout and constraint set’ by Sean McQuillan, which inspired me to try it out and that’s why I’m sharing this knowledge with you. If you haven’t watched, please do

A simple example

I don’t want to bore you with all definitions and introductions. Let’s do this small example and it will be a lot easier to understand what’s happening in the end.

The goal of our example is the following animation — which we want to achieve.

Simple animation

As you can see, we have our android logo at the top of our screen. On tapping the image, it has to come to the bottom of the screen. Also, notice that when the image reaches bottom of the screen, it’s size is increased.

Walkthrough

I’ve created a branch for the part 1. Please hit the star and clone this branch to join me in this walkthrough.

Hariofspades/ConstraintSetZone

Step 1: Creating our layouts

For our keyframe animation, yes, as the name suggests — is a drawing that defines the starting and ending points of any smooth transition. Hence need starting frame and the ending frame. Here, our frames are nothing but our layouts.

Let’s create our first layout of our ImageActivity. Play close attention to the constraints.

Let’s create our final layout or the second frame — activity_image_alt.xml. In this second layout, to make our image bigger, I’ve increased it to 250dp.

Step 2: Creating Animation

Now, we need to make this transition smooth by defining the animation, with the starting point as activity_image.xml and ending point as activity_image_alt.xml.

In our ImageActivity.kt, let’s create the click listener for our image and add the following code.

So, what’s ConstraintSet ? — this class allows you to define programmatically a set of constraints to be used with ConstraintLayout. It lets you create and save constraints, and apply them to an existing ConstraintLayout.(source)

And clone() method, will absorb all the constraint mappings and properties of a particular layout. Here, we are getting all the constraints of root(ConstraintLayout in activity_image.xml) and the layout activity_image_alt.xml.

Now, we have both layout’s constraints in hand. All we need to do is to make the transition from one layout’s constraints to the other. To do this, we seek our TransitionManager, to assist us in this process

TransitionManager — this class manages the set of transitions that fire when there is a change of Scene. Setting specific transitions for scene changes is not required; by default, a Scene change will use AutoTransition to do something reasonable for most situations. Specifying other transitions for particular scene changes is only necessary if the application wants different transition behavior in these situations.(source)

beginDelayedTransition() — convenience method to animate, using the default transition, to a new scene defined by all changes within the given scene root between calling this method and the next rendering frame. Equivalent to calling beginDelayedTransition(ViewGroup, Transition) with a value of null for the transition parameter.(source)

applyTo() — sets or applies the new or requested constraints to the view specified.

To summarise the function

• We created 2 ConstraintSet() — constraint1 and constraint2
• We got the constraints from activity_image.xml using clone() and mapped it to constraint1
• We got the constraints from activity_image_alt.xml using clone() and mapped it to constraint2
• Then with the help of our TansitionManager, we initiated a default transition using beginDelayedTransition to our root ConstraintLayout
• Based on the set value, we changed and applied the Constraints using the method applyTo()

Step 3: Congratulate yourself!

Yes, that’s all! no more additional steps. Run the app and check it yourself. Tap the image and you will see the keyframe animation in place.

Some heads-up

As you can see, we need to duplicate the layouts to achieve the animation or transition. But nobody would like to duplicate anything. But when you clone the constraints, it takes only the layout related constraints and attributes such as layout width and height. But not the styling attributes — such as textSize and stuff. (We’ll see this in second part). So you need not replicate the exact styling in all the alternate layouts.

Also, you might be wondering why you need this. You can achieve the same result using transition framework. This method becomes so powerful when you want to implement constraint specific animations involving chained elements and guidelines sort of constraint properties. If not, providing animations for each of the views will be a tiresome job.

ConstraintLayout will only perform animation on its direct children since it only knows when you change layout parameters and constraints on the children that it handles. It may not handle ViewGroups well. But nested ConstraintLayout may solve this problem. We’ll try in our last pitstop.

TL;DR

We derived a small example implementing keyframe animation using ConstraintLayout and ConstraintSet. Then we had a little discussion on few things to consider with this animation process.

We also peeked into few methods with made our animation possible.

What’s Next?

Next, we’ll see another use-case and we’ll also learn how to implement other transition effects.

Creating awesome animations using ConstraintLayout and ConstraintSet — part 2

Recommended Reading

Dagger 2 for Android Beginners — Introduction

Thank you for using your precious time to reading this article. Liked it? Clap your 👏 to say “thanks!” and help others find this article.