Animations in Android — Featuring MotionLayout from Scratch
MotionLayout is a magical and impressive layout introduced at Google I/O 2018 which provides ease in the world of creating UI animations, transitions, and complex UI motions for Android developers.
MotionLayout is a new class available in the ConstraintLayout 2.0 Library introduced by Google for those who are fond of creating interactive animations. As we already know, accomplishing complex UI animations in Android is possible but very tedious to create.
Why and when we need to use MotionLayout?
Did you ever thought even if Android is already providing us several ways of creating different animations, then why we need to go for MotionLayout?
The reason to make it differs from the above alternate ways is the rich capability of MotionLayout which lets you position your elements. It can be considered as a combo pack of the above solutions in a single container.
A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout.
It supports touch handling and keyframes, allowing developers to easily customize transitions as per their needs. Beyond this part, MotionLayout is fully declarative — we can completely describe in XML — no further code is needed to do programmatically until and unless you want 😁
When to use: If the user needs to interact with any components to animate, resize or move it, we should give a chance to MotionLayout.
Adding ConstraintLayout 2.0 & MotionLayout to your project
To use MotionLayout in your project, this can be simply done by adding the ConstraintLayout Library in your build.gradle file. If you are using AndroidX instead of the support library, add the following dependency :
If you aren’t using AndroidX, then add the following support library dependency:
MotionLayout Editor — Extension of Android Studio’s layout editor
From Android Studio 4.0, a stable version of this editor is available. This editor is a visual design editor for MotionLayout. The Motion Editor provides a simple interface for manipulating elements from the MotionLayout library that serves as the foundation for animation in Android apps. Without Android Studio, creating and altering these elements requires manually editing constraints in XML resource files.
The Motion Editor helps you visualize starting and ending states of transition with the Overview panel.
Also as a part of ConstraintLayout 2.0, it is available as a support library, backward compatible to API level 14 (ICS).
How to use MotionLayout?
MotionLayout is a subclass of ConstraintLayout — like a normal layout, also we need to convert or transform ConstraintLayout to MotionLayout easily.
To use of MotionLayout first, we need to create the layout of the screen and include the elements on which we want to apply animation using MotionLayout. All the other information we need to keep in a separate XML file which is MotionScene. In the layoutDescription attribute, we need to assign the XML file name of the motion scene.
Even if MotionLayout is a subclass of ConstraintLayout, is there any difference between them? 🤔
Yes, the main key difference between these layouts is at the XML level is that the main code of what MotionLayout will do is not necessarily be included only in its layout file.
Rather, MotionLayout typically keeps all this information in a separate XML file (a MotionScene) that it references, and this information will take precedence over the information in the layout file.
So the positioning or transition will be separate other than View and its properties in the main layout file.
Concept of Constraint sets and MotionScene tags
MotionScene: All animation information for animating change of properties of UI elements of a layout from starting state to end state is stored in XML file called motion scene file which is saved in XML folder.
The root element of motion scene XML is MotionScene. The file contains details for animation such as when to trigger the animation, from the state, to state, animation duration, and other transition details. Transition and ConstrainSets elements are defined in the motion scene file.
ConstraintSets are added to the motion scene file to define starting and ending state constraints for the elements involved in the animation.
In the above example, we are having a root layout of MotionScene which must contain <Transition> and can contain<ConstraintSet>.
Transition — Specifies the motion sequence to perform. If the <MotionScene> contains multiple <Transition> elements, the MotionLayout chooses the most appropriate based on the user's interaction. We can also set the duration using the duration attribute and motionInterpolator attribute to define the animation interpolator.
ConstraintSet — Specifies a beginning or ending state for one or more of the <Transition> nodes. The <MotionLayout> is permitted to have zero <ConstraintSet> children since the <Transition> can point to XML layouts instead of pointing to constraint sets. A <ConstraintSet> must contain a <Constraint> element with all the layout properties for each view you want to animate.
MotionLayout hosts only with direct children's views and no other nested views.
OnClick and OnSwipe handler features
OnClick — Specifies the action to perform when the user taps on a specific view. There can be multiple <onClick> nodes for a single <Transition>, with each <onClick> specifying a different target view and a different action to perform when the view is tapped.
OnSwipe — Specifies the action to perform when the user swipes on the screen or layout. It includes the speed of the motion sequence, and the motion of the targeted view is affected by the speed and direction of the swipe, subject to the limits you set with optional parameters.
MotionLayout Example
Now let’s jump to see the power of how MotionLayout works with an example:
Our agenda is to create a sample for Image Rotation Animation using MotionLayout.
Create a project with Empty Activity. Navigate to your XML file and select the Design option on the right side of Android Studio. We can see the design editor the below image with the Constraint Layout as a root element.
Let’s convert it into MotionLayout. Right-click on Constraint Layout in the Component Tree, we can see the option to convert our layout into MotionLayout.
Next, after converting into Motion Layout, here we can see the MotionLayout Editor with all its options and MotionLayout as a root element instead of Constraint Layout in the component tree. See how easy it is 😎
Once we have converted the layout file to MotionLayout, a motion scene file will automatically generate in the XML folder.
So we are all done with file conversion/creation, let’s move forward to further steps. Navigate to MotionLayout Editor click on the arrow sign on the top of the Start and an End portion, below it we can see Transition Panel just right-click on the timer icon, here we can see the list of options through which we can create keyframes. For our implementation, we need to click on the KeyCycle option.
In the Wave Shape dropdown selection, we have different oscillations such as sin, square, triangle, etc. according to our requirement, we would choose sawtooth (a waveform — showing a slow linear rise and rapid linear fall or vice versa) and in Attribute to cycle option, we would choose rotation as we need to rotate the Android logo. Also we need to set value for few attributes like rotation to “180”, duration to “30 sec” and auto transition attribute to “animateToEnd” in the KeyCycle option.
After configuring all attributes, our complete and final code implementation looks as follows :
So finally we are all done with our implementation 😳. Shocked with no more coding? 😀
Here is the final overcome of our implementation with pretty much less/no code. 😎
In this article, we have covered the following list of points and now you might know how MotionLayout can help us making UI animations and transitions:
- Why and when we need to use MotionLayout?
- Adding ConstraintLayout 2.0 & MotionLayout to your project
- MotionLayout Editor
- How to use MotionLayout?
- Even if MotionLayout is a subclass of ConstraintLayout, is there any difference between them?
- Concept of Constraint sets and MotionScene tags
- OnClick and OnSwipe handler features
- MotionLayout Example
Wrapping up
So this is it !!! Hopefully, this was a pretty much short and sweet example to understand the charisma of MotionLayout. If you want to explore more, do check out the official documentation at https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
I’m looking forward to seeing how MotionLayout rolls up its sleeves and launches its feature-roller coaster into Mobile App Development. Anticipating the same with you!!!
🖊 Do check out for more articles on Simform Engineering 🖊
Thanks for reading! Hope you learned something essentials about MotionLayout. Don’t miss to hit the clap icon and also do share this with your tech colleagues.
Do you have any feedback/queries? Feel free to reach out to me on LinkedIn, Twitter, or Facebook.
