Introduction to MotionLayout (part III)

Nicolas Roard

·

Follow

Published in

Google Developers

·

4 min read

·

Jun 27, 2018

--

10

Listen

Share

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:

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:

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:

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:

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:

<Constraint

    android:id="@+id/animation_view"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    motion:progress="0"
/>

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:

Conclusion

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