During the Google I/O 2019 event, the company introduced new features to the existing ConstraintLayout. One of the biggest advantages is a powerful motion editor called MotionLayout. It allows you to build complex, multi-parameter transitions driven by clicks or swipes.
Main benefits of using this approach are:
- Visible way to create start to end transitions
- Ability to change scenes on the fly
- Connecting animated components with each other
- Defining single frames called KeyFrames during the transition
Basic principles of MotionLayout
To better understand how this tool works we need to establish some elementary concepts. Firstly, most of the things are declared in your view file, not in code. To build motion scenes you need MotionScene, Transition and ConstraintSet. The main idea is to create a start and end scene and let your IDE fulfill everything between. It sounds pretty simple and in fact, it is!
Always have a vision of the end
We have a great landing page that shows projects that we brought to life in years of our existence. It would be great to create a landing app, too. Let’s think about the components that the app will contain.
The header is the first component and sits always on top. This is the first source of knowledge about our company. Next, we have cards with projects. I decided to create a minimalistic and not overwhelming form, so the users can decide which project they are interested in. Action dot is added in order to show the viewer that the card is interactive and the header isn’t. The last component is a rounded contact button. These views are clean and readable but with animations, we can show some details even better.
Animations that are meaningful
Let’s consider step by step how every detail can be improved. For example, the header replaces the logo, but for the user, it would be too big to show it always on top. There is a way to collapse it and still showcase the brand.
In MotionLayout, we create big and small cards. On transition, we define transparency change of title and description in order to hide or show them. Now it doesn’t take much space.
Clicking on the button, the user can pick our number and call us, but we also want to show him that we have a website. This can be achieved by exchanging a floating button with a bottom information label.
Here we scale the button depending on scrolling state. It is important to scale both X and Y axes. The label is enlarging its width from 0 to screen’s width.
Showing more information on the card
As we create a landing app all the needed information must stay on the same screen. This is quite a challenge. In this case, the card is also a separate MotionLayout. The result to which we are straining to is shown below:
In some way, the card’s title must be moved from the center to the upper left corner. This can be easily performed by adjusting the position of title in the middle of the way. Using the mentioned KeyFrameSet we can adjust the path to reproduce an exponential path.
The description is just expanding to the card’s borders and during growth, it is less translucent. This part should be declared in ConstraintSet.
When the card has more information we also should hide the “Click to show more info” text and notify the user about action to learn more.
To encourage the user in clicking, we spin the button 360 degrees and it jumps in from the bottom of the card. This is done via a simple rotation parameter. Helper text is moving to the end of the screen in that way it isn’t visible anymore. This is a vastly meaningful animation for users. This says: “You have shown more information but still it is possible that the helper text will come back with less information”.
Let’s sweeten this screen with a little of Lottie
Lottie is a big thing in the development of our apps. For example, in the InPost app, Lottie helped to guide the user through remote parcel unlocking making this process easy and pleasing.
On the card, we wanted to animate the action dot to make clicking action yet more interactive. Lottie is aware of MotionScene’s progress so it animates along with other components. We have used this open-source Lottie file created by Sumesh Sughatan.
The final app is clean, beautiful and completely animated. Playing with MotionLayout, you can show paths that represent all possible movements on the screen.
Summary
Now creating composite transitions in Android is faster and much more accessible. With MotionLayout we can build expressive and eye-catching layouts in order to approach flexibility and easiness now firmly identified with Flutter.
Hope you liked this short tutorial. We can do much more for you when it comes to animations, but not only. Contact us and find out what else we can do to make your product shine.
