How To Create Animations For Android Using MotionLayout

The second post in our Android animation series.
David Franquet
David Franquet
January 4, 2019

In the inaugural post in my series on Android animations, I looked at how developers could seek to create flawless animations using both Shared Elements and the ConstraintLayout library.

In this post, however, I’ll be looking at how we can create similarly smooth animations using MotionLayout. MotionLayout is a new class, available in the ConstraintLayout 2.0 library, that helps manage both motion and animation.

Adding MotionLayout to our projects

In the aforementioned blog post on how to create Android animations with ease, I used the initial ConstraintLayout library so I’ll need to update to the current alpha version before starting this project.

Once it’s updated, all I need to do is simply add the ConstraintLayout library to the app/build.gradle file as demonstrated below:

<p> CODE: "https://gist.github.com/DavidFD005/03b035699e3f4610f815fa99dc8e9c61.js"</p>

We’re now good to go!

Working with MotionLayout

There are two ways to define the animation:

  1. By using separate layout files - e.g a start and end layout that’s referenced inside a MotionScene (XML file) using a Transition.
  2. By using a self-contained MotionScene - e.g using only one layout file and two ConstraintSets inside the MotionScene file.

In this blog post, I’m going to be using the latter.  

I’ll be creating a very simple animation to begin with that handles a horizontal OnSwipe event before adding some magic to the animation with the KeyFrameSet.

---

For the simpler animation, I’ll be creating a layout using MotionLayout as a parent alongside an ImageView which I will then animate like this…

<p> CODE: "https://gist.github.com/DavidFD005/b1015153a89ed80ee8efd40eb85fad57.js"</p>

I will then need the MotionScene file (which I’ll create inside RES/XML) to configure all of the animation and motion parameters.

Once that’s dealt with, I’ll add a Transition with a linear interpolator and 1 second duration (if the swipe event is stopped).

I’ll add the OnSwipe handler inside it using the following configured parameters:

  • dragDirection - The direction of the motion we’re tracking (dragRight / dragLeft / dragUp / dragDown).
  • touchAnchorID - The view that we will track (which, in our case, is @+id/logoImage).
  • touchAnchorSide - The side of the view that should track your finger (top / left / right / bottom).

For the purpose of this demonstration, I’m going to be using the dragRightdirection and the right side view.

In order to do this, I’ll need to create two ConstraintSets (a start and an end)using constraint objects for each object that I want to alter. In this case, I’ll have only one constraint on each ConstraintSet.

I’ll then need to reference it on the Transition object using the following parameters: constraintSetStart and constraintSetEnd.

I want to start the animation with the view at the centre-left of the screen before finishing with the view at the centre-right.

<p> CODE: "https://gist.github.com/DavidFD005/614b67134a4e8d277c5e27d20d31c5e0.js"</p>

Once we’ve tended to the MotionScene, we need to reference it in our layout with the following parameter: app:layoutDescription.

<p> CODE: "https://gist.github.com/DavidFD005/e2ccdbee19238f5bfcb2f55d063eb994.js"</p>

Let’s now run the app and see what happens!

how to create animations for android app

As you can see, all it takes to create a swipe animation with XML is a few simple code-free steps! It couldn’t be easier to create animations that you can be proud of.

Let’s add even more magic to our animation!

Adding a KeyFrameSet

The KeyFrameSet allows us to change some parameters on specific points of the animation, such as the position, scale or rotation of the object that we are tracking. Inside the KeyFrameSet we are able to add the following parameters:

  • KeyPosition: This allows us to change the relative position from the parent, the path of the animation or the delta.
  • KeyAttribute: This allows us to change the scale, rotation or the alpha (among other parameters).

Let’s add some KeyPositions and KeyAttributes on various points of the animation to see how that changes things:

<p> CODE: "https://gist.github.com/DavidFD005/9206a268f391816304973b7e47f6163e.js"</p>

As you can see, I’ve added a position change on 50% of the animation and some scales and rotations on 40% and 60% of the animation.

Let’s run the app again to see the results!

how to create animations for android app

It worked!

These changes, however small, highlight the power of MotionLayout and how easy it is to implement it. Can you imagine how complicated it would be to do it all programmatically?! MotionLayout is much more preferable!  

Here’s another example that I made using MotionLayout. You can find the source code on my Github!

how to create animations for android app

You should now be able to go away and develop your very own Android animations using MotionLayout. If you give it a go, don’t forget to tweet us and let us know how it went!

In the next instalment in my Android animation series, I’ll be exploring MotionLayout even further – looking at how we can create beautiful menus with the DrawerLayout tool and beautiful headers with the CoordinatorLayout tool. Keep your eyes peeled for that!

In the meantime, make sure you’re following us on Twitter, Medium or LinkedIn to be notified of our future blog posts. We share weekly posts on everything from how to develop apps for foldable devices to how to efficiently manage your Android app’s memory.

(Image credit)