Motion Layout for beautiful animation

As constraint layout 2.0 is available in the stable version so with that we also have motion layout in the stable channel because motion layout is the sub-class of constraint layout. With motion layout, you can create complex animation with ease as it hardly requires manual coding to create animations.

How does it work?
Motion layout is a sub-class of constraint layout which means all those concepts of constraint layout like positioning the views etc are applicable with motion layout also, apart from that you will also create another XML where you can define when your animation should start, the path for it and even change the constraint, properties or attribute from the motion scene file defined in XML. With motion layout you can think of completely removing the constraint set as animation can smoothly be handled in a declarative way defined in the motion scene file.

What is a motion scene file?
This file does all the work related to animation and further positioning or changing the attributes of views like color, size, text, etc. However, this will only be useful if you are adding animation otherwise there is no point switching to motion layout, you may consider using the constraint layout.
In the motion scene file, you have to define the Transition and ConstraintSet these two are the most important part of scene file, where Transition defines when to start the animation and ConstraintSet encompasses the constraints for the views whichever you want to animate.

Transition
Here you have to define the start and end of transition where both start and end should be the ConstraintSet and you can have any number of transition in a single motion scene file.
Here, you can define either OnClick or OnSwipe where based on the view id specified it can start the animation, if you provide OnClick with clickAction as toggle then as you click on the view it will transition from start to end and clicking again on it will do reverse animation, end to start. You can also change the animation path by providing the KeyFrame.

ConstraintSet
This is the place where you define the start and end position for your views, you can specify where your views should be aligned before animations start and where it should end up after animation not just this in the case of attribute changes like color, visibility, alpha, etc you can specify all those things. It requires Constraint which you can specify inside ConstraintSet where you specify everything about views.

Constraint
When you specify views in motion layout file you have to provide ids to all the views whose parent is MotionLayout by using that id you can create Constraint inside ConstraintSet in MotionScene file. As you are just specifying the view with id not with a type like TextView, Button, etc so inside Constraint you cannot specify those attributes directly which it depends on. However, changing attribute is one of the important concepts which cannot be missed out so that’s why we have following SectionedConstraints available inside Constraint:
1. PropertySet
2. Transform
3. Layout
4. CustomAttribute
5. Motion

Where all of them are helpful to change the attributes for the view during animation and at the end or at the start.

PropertySet is useful to set visibility or alpha for views
Motion is useful to alter the transition easing, draw path and set stagger
CustomAttribute is useful to alter anything which is having a setter method and its value could be String, Color, Float, Integer, Boolean, Dimension, PixelDimension or ColorDrawable
Layout is useful to specify the constraints for the views
Transform is useful to change rotation, elevation, scale and translation

That’s it in this article where I have focused more on the keywords used with motion layout, to know how to get started with it then switch to the following tutorials videos which I have created on YouTube

Thanks for reading this article if you have liked the videos then do not forget to subscribe to the channel.