15. Animations and Transitions with CoordinatorLayout and MotionLayout

Overview

This chapter will introduce you to animations and how to handle changing between layouts. It covers the description of moving objects using MotionLayout and the Motion Editor in Android, along with a detailed explanation of constraint sets. The chapter also covers modifying paths and adding keyframes for a frame's motion.

By the end of this chapter, you will be able to create animations using CoordinatorLayout and MotionLayout and use the Motion Editor in Android Studio to create MotionLayout animations.

Introduction

In the previous chapter, you learned about architecture patterns such as MVVM. You now know how to improve the architecture of an app. Next, we will learn how to use animations to enhance our app's look and feel and make it different and better than other apps.

Sometimes, the apps we develop can look a little plain. We can include some moving parts and delightful animations in our apps to make them more lively and to make the UI and user experience better. For example, we can add visual cues so that the user will not be confused about what to do next and can be guided through what steps they can take. Animations while loading can entertain the user while content is being fetched or processed. Pretty animations when the app encounters an error can help prevent users from getting angry about what has happened and can inform them of what options they have.

In this chapter, we'll start by looking at some of the traditional ways of doing animations with Android...

Activity Transitions

When opening and closing an activity, Android will play a default transition. We can customize the activity transition to reflect the brand and/or differentiate our app. Activity transitions are available starting with Android 5.0 Lollipop (API level 21).

Activity transitions have two parts: the enter transition and the exit transition. The enter transition defines how the activity and its views will be animated when the activity is opened. The exit transition, meanwhile, describes how the activity and views are animated when the activity is closed or a new activity is opened. Android supports the following built-in transitions:

• Explode: This moves views in or out from the center.
• Fade: This view slowly appears or disappears.
• Slide: This moves views in or out from the edges.

Now, let's see how we can add activity transitions in the following section. There are two ways to add activity transitions: through XML and through code. First...

Animations with CoordinatorLayout

CoordinatorLayout is a layout that handles the motions between its child views. When you use CoordinatorLayout as the parent view group, you can animate the views inside it with little effort. You can add CoordinatorLayout to your project by adding in your app/build.gradle file dependencies with the following:

implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'

This will allow us to use CoordinatorLayout in our layout files.

Let's say we have a layout file with a floating action button inside CoordinatorLayout. When tapping on the floating action button, the UI displays a Snackbar message.

Note

A Snackbar is an Android widget that provides a brief message to the user at the bottom of the screen.

If you use any layout other than CoordinatorLayout, the Snackbar with the message will be rendered on top of the floating action button. If we use CoordinatorLayout as the parent view group, the layout will...

Animations with MotionLayout

Creating animations in Android is sometimes time-consuming. You need to work on XML and code files even to create simple animations. More complicated animations and transitions take more time to make.

To help developers easily make animations, Google created MotionLayout. MotionLayout is a new way to create motion and animations through XML. It is available starting at API level 14 (Android 4.0).

With MotionLayout, we can animate the position, width/height, visibility, alpha, color, rotation, elevation, and other attributes of one or more views. Normally, some of these are hard to do with code, but MotionLayout allows us to easily adjust them using declarative XML so that we can focus more on our application.

Let's get started by adding MotionLayout to our application.

Adding MotionLayout

To add MotionLayout to your project, you just need to add the dependency for ConstraintLayout 2.0. ConstraintLayout 2.0 is the new version of ConstraintLayout...

Summary

This chapter covered creating animations and transitions with CoordinatorLayout and MotionLayout. Animations can improve the usability of our app and make it stand out compared to other apps.

We started by customizing the transition when opening and closing an activity with activity transitions. We also learned about adding shared element transitions when an activity and the activity that it opens both contain the same elements so that we can highlight this link between the shared elements to the users.

We learned how we can use CoordinatorLayout to handle the motion of its child views. Some views have built-in behaviors that handle how they work inside CoordinatorLayout. You can add custom behaviors to other views too. Then, we moved on to using MotionLayout to create animations by specifying the start constraint, end constraint, and the transition between them. We also looked into modifying the motion path by adding keyframes in the middle of the animation. We learned...