Android Motion Layout: Card Shuffle Animation

Muhammad Saeed
Jul 20 · 6 min read

Hi friends! In this article we will explore keyframe animation in motion layout and create card shuffle animation as shown in video.

Intro to Motion Layout

Motion layout comes out in constraints layout 2.x version which provides animation in the layout. Motion Layout is the extension of constraints layout, so you can set its constraints just like you set in constraints layout. In order to animate the motion layout we need Motion Scene.

Motion Scene

The specification of what MotionLayout does is kept in a separate XML file, MotionScene, which is stored in your res/xml directory.

A MotionScene file can contain all that is needed for specifying the animation:

  • the ConstraintSets used
  • the transition between those ConstraintSets
  • keyframes, touch handling, etc.

Transition

Transition need start and ending constraints set and duration. It trigger animation from start to end or end to start constraints set.

ConstraintsSet and Constraints

The general idea with ConstraintSet is that they encapsulate all the positioning rules for your layout; and as you can use multiple ConstraintSet, you can then decide which set of rules to apply to your layout, on the fly, without having to recreate your views — only their position/dimensions will change.

KeyFrameSet

KeyFrameSet gives all possibilities to achieve key frame animation. For example: change text size at 30 frame, change background from white to black and then after 50 frames to white.

For more details check introduction to motion layout series https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

Enough Explanation! lets begin the real show:

Create new project and add Constraints Layout dependencies in app gradle.

open activity_main.xml and change top level Constraints Layout to MotionLayout and create two views view1 and view2. set elevation of view1 to 1dp and view2 to 0dp.

So this is our activity_main.xml look like, Now lets create our motion scene. To create motion scene we should have xml folder in res folder, so the motion scene path will be like res>xml>card_shuffle_scene.xml

Here we set starting constraints set and ending constraints set. At start we want view1 over on view2 and at the ending state we set view2 over view1 to make shuffle effect. And these constraints set to the transition on respective state. Here is the catch if you want to change the constraints of any view then id should be same in layout and in motion scene otherwise no effect will be apply.

Now bind your motion scene with motion layout, so add the layoutDescription attribute in motion layout.

Now run and swipe to the right.

WOW!!! no animation just hide and show. But its slightly fun.

Now the fun time has been started lets add shuffle effect in motion scene. :)

Run again and swipe right!

Yeah!!! Let me briefly explaining that we translate view1 to the right and then return to its original position, and in a mean time we scaled down so it will be seem moving behind.

Now add motion in view2.

Cheers!!! finally you got card shuffling effect. We just zoom in view2 after 40% of animation completed and it will act like it is moving towards screen.

So, the card shuffling strategy is very easy and effective. You move view1 to the right then back to its original position and zoom out. And view2 stay to its position and just zoom in.

Conclusion

In the end there is no limitation you can do a lot of thing with motion layout by your own. You can animate your splash screen, create your own pop up view and a lot more. Here is some example on motion layout which will give you some idea what else can you do.

Muhammad Saeed

Written by

Android and Flutter Dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade