Creating awesome animations using ConstraintLayout and ConstraintSet — part 3

This is the third part of the series. If you’ve not read the first one, you can start from below.

Creating awesome animations using ConstraintLayout and ConstraintSet — part I

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]
• 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](you’re here)

Prerequisites

• Android app development basics
• Kotlin
• Constraint layout

Previously…

We took a real-time example, designed the layout using ConstraintLayout and performed our keyframe animation. We also calculated our bounds and added interpolators to our transition effect.

Solving a UI challenge

The following UI was inspired from UpLabs. I’m not going to solve this 100%. But we’ll get a glimpse of this functionality just to see how building a complex layout and animating it is easy using ConstraintLayout and ConstraintSet.

Our Output

I understand. It’s not looking nice as it was designed. But remember, when you’re building such layout, you may take more time and animating it will also burn more time. The above rough example was actually less than an hour hack. So, imagine if you put a little more time, you can bring it to perfection.

Please give a star to the following repo then clone or download the following branch

Hariofspades/ConstraintSetZone

Step 1: Creating our base layout (activity_shopping.xml)

We need 2 layouts for the above animation. Let’s create our first or the base layout.

Things to notice — the alpha values for the size-related views and other layout parameters of the ImageView.

Step 2: Creating the alternate layout (activity_shopping_alt.xml)

Now, let’s create the second layout i.e. the endpoint layout. As you saw in the animation, we need to hide the image and we should also pop out the close button at the bottom and Change the button text as well.

Things to notice — the alpha value of the layouts and the layout parameters of the ImageView.

Step 3: Animation

Now, we have 2 click events. One for the askSize button and another for close. For updating the constraints of the child views of the ConstraintLayout, we’ll be using the existing method from our previous part — updateConstraints().

Things to notice — I’ve used OvershootInterpolator(). Feel free to explore other interpolators. Notice that I’m changing the text of the button in our Kotlin code. I did not change it in XML. The reason is, when you clone, only the constraints and layout attributes will be copied. Not the other attributes.

Step 4: Congratulate yourself!

Yes. That’s it. Run the app, you will see the animation. 😀

Final Thought

Nested ViewGroups

ConstraintSet animation will work only for the layout’s immediate children. Not for the nested ViewGroups. Why? the main purpose of ConstraintLayouts is to build layouts without any nesting and to avoid complex view hierarchies. So, if you’re using ConstraintLayout and then nesting the views, it doesn’t solve its purpose.

However, if you go with nesting, then you need to animate those views separately. It will not work as expected if you use this method.

When and where should I prefer this method?

Good question. You can prefer this method when you have the following

• When you have built the layouts with ConstraintLayout
• When you have too many views to be animated on the single event
• If you want to do it quickly, not spend too much time

Worried about copying the layout?

Yes, but it will save a lot of time. And only constraints and layout attributes will be reused. Not any other attributes.

I need to animate/change only one or two views. Why should I duplicate the entire layout?

Very good question. You need not duplicate the entire layout. Yes! all you need to do is to alter them on the Kotlin itself. Example,

TransitionManager.beginDelayedTransition(shoppingRoot) //ViewGroup
textView2.minHeight = 200

When you change one view, then ConstraintSet will calculate and adjust other according to the given constraints

API limitations

• ConstraintLayout and ConstraintSet supports from API 9 onwards
• TransitionManager is from API 14 onwards

Other Interpolators

Yes, they are available. Check this out.

android.view.animation | Android Developers

How this animation works once again?

As the name suggests — keyframe, we need 2 keyframes i.e. the starting point and the ending point. Then provide these key-frames to ConstraintSet. It absorbs all position and constraint related attributes of the layout, discarding all styling related attributes. Then apply this attributes to the layout. The ConstraintLayout then calculates all the view position for every child views.

Now, when you pass this on to the Transition manager, which traces these paths with nice and fluid animation. That’s how this works.

This key-frame animation is a powerful weapon if used properly. Please think and use wisely.

Recommended Reading

Dagger 2 for Android Beginners — Introduction

Happy Learning! Bye! See you soon!

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

---

Creating awesome animations using ConstraintLayout and ConstraintSet — part 3 was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.