Published in


Build awesome animations with 7 lines of code using ConstraintLayout

Playing with animations is always fun but, sometimes, it’s really hard to create them, because you need to do a lot of measurements, calculations and other stuff with the UI. For those reasons, build animations sometimes takes time and a lot of coding.

ConstraintLayout loves ConstraintSet

The concept is to create two different layouts, one for the starting point and one for the ending point of the animation. Let’s see first what we’re going to build: Our goal is to create an animation that shows-off the circuit detail when the user press the screen, with seamless and fluid animation.

This animation is created with two different layouts file: circuit.xml and circuit_detail.xml

As you can see, the layouts are exactly the same, the only difference is that in the first one (circuit.xml) the elements are placed offscreen, while in the second one they are in the desired position.

first layout: circuit.xml — The views are the same as the second layout, but they are hidden outside the layout
second layout: circuit_detail.xml — The final view positions

So, let’s build the animation and let’s see how is incredibly easy to make animations with ConstraintLayout and ConstraintSet.

Let the magic happen

val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.circuit_detail)

Now, let’s create the transition object used to set the interpolator and the duration of animation:

val transition = ChangeBounds()
transition.interpolator = AnticipateOvershootInterpolator(1.0f)
transition.duration = 1200

And, last but not least, we need to call the TransitionManager.beginDelayedTransition() used to create a new scene and to run the transition on the next rendering frame. Lastly, we call applyTo() to finally start the animation.

TransitionManager.beginDelayedTransition(constraint, transition)


It’s really 7 lines of code.

That’s it! You can check the full example on my GitHub repo at the following link:

Did you liked the article? Stay in touch and follow me on Twitter (@lpirro93) or write me an email.

The (retired) Pub(lication) for Android & Tech, focused on Development