Introduction to MotionLayout (part III)

Nicolas Roard
Jun 27, 2018 · 4 min read

In Part I and II of this series, we introduced MotionLayout with various examples:

  • basic motion
  • swipe handling
  • custom attribute interpolation
  • keyframes

Part I & II gave a broad overview of the basic concepts introduced in MotionLayout.

This Part III will cover how you can use MotionLayout in your existing applications, integrating it in your existing layouts such as CoordinatorLayout, DrawerLayout or ViewPager.

Using MotionLayout with CoordinatorLayout

(Note that MotionLayout can be used to implement similar behavior as CoordinatorLayout. We will show examples of this in an upcoming article)

An easy way to take advantage of MotionLayout is to use it to specify how some part of the screen content can be animated. This way, you can add more interesting motion to existing layouts / screens you already set up in your application, without having to start completely from scratch.

For example, you may want to build the following screen:

Image for post
Image for post

The general idea here is to replace the Toolbar element in an AppBarLayout with a MotionLayout. We then let CoordinatorLayout drive the progress of the animation.

As you can control a MotionLayout’s transition position by calling setProgress(), we can build a simple subclass to do so automatically by listening to the AppBarLayout offset changes:

Your CoordinatorLayout XML file can then be modified to use this subclass instead of Toolbar:

The only thing left to do is then to create a MotionLayout file containing the views that we want to animate. Here we have an ImageView serving as background, and a TextView:

Finally, the animation itself can be described in a MotionScene:

Using MotionLayout with DrawerLayout

DrawerLayout is another class provided by the Android framework to bring up a side drawer. Rather than the usual menu, we may want to build something a little more interesting:

Image for post
Image for post

Similar to what we did to integrate MotionLayout with CoordinatorLayout/AppBarLayout, we can build a small subclass that will automatically set the MotionLayout’s progress:

This subclass will automatically sets the progress given the slideOffset value, from the onDrawerSlide() callback.

Using this subclass, we can easily integrate a MotionLayout in a DrawerLayout:

The motion_12_drawerlayout_content.xml file simply contains a similar layout as the one we used in our previous CoordinatorLayout example.

The menu file is the one using MotionLayout (or rather, the DrawerContent subclass we created):

The MotionScene file simply rotates the different elements (check the rotation attribute between the start and end ConstraintSet):

Using MotionLayout with ViewPager

In a similar way, we may want to have a more interesting ViewPager header than typical:

Image for post
Image for post

We can use a similar trick to integrate with the ViewPager infrastructure, by creating a subclass to pass the current position:

The math is pretty straightforward — onPageScrolled() gives us the position index of the page (so here, 0, 1 or 2 as we have 3 pages), the positionOffset (from 0 to 1, offset from the position…). The total progress of the animation can then be set to be:

progress = (position + positionOffset) / (numPages-1)

Using Lottie with MotionLayout

The previous example built a simple animated header using actual ImageViews. You can also easily integrate Lottie files in your MotionLayout, and set the progress directly — MotionLayout will be able to drive it.

Let’s change our previous example to instead use a LottieAnimationView:

Image for post
Image for post

Let’s replace the layout file of our MotionLayout-based ViewPager header to only contain a LottieAnimationView for simplicity’s sake:

The key modification in the MotionScene is by using the motion:progress attribute:


As LottieAnimationView has a setProgress() function, this will result in MotionLayout calling it, and allowing you to drive the Lottie progress directly.

The full MotionScene file can be written as:


This third article covers how to easily integrate MotionLayout in your existing layouts.

You can find the source code for those examples in the ConstraintLayout examples github repository.

There’s a lot more covered in this series of articles:

  • Introduction to MotionLayout (part I)
  • Custom attributes, image transitions, keyframes (part II)
  • Taking advantage of MotionLayout in your existing layouts (CoordinatorLayout, DrawerLayout, ViewPager) (part III)
  • All about Keyframes! (part IV)
  • MotionLayout as a choreographer of root layout
  • Nesting MotionLayout & other Views
  • MotionLayout with fragments

Feedback, feature request, bug reports? please file them on the android issue tracker.

More info on ConstraintLayout & MotionLayout ? Follow us on twitter, @camaelon and @johnhoford

Google Developers

Engineering and technology articles for developers, written…

Thanks to Sebastiano Poggi, Sean McQuillan, and Takeshi Hagikura

Nicolas Roard

Written by

I’m working on Android stuff at Google

Google Developers

Engineering and technology articles for developers, written and curated by Googlers. The views expressed are those of the authors and don't necessarily reflect those of Google.

Nicolas Roard

Written by

I’m working on Android stuff at Google

Google Developers

Engineering and technology articles for developers, written and curated by Googlers. The views expressed are those of the authors and don't necessarily reflect those of Google.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store