Chapters
Chapters

Chapters

Hide chapters

Real-World Android by Tutorials

Second Edition · Android 12 · Kotlin 1.6+ · Android Studio Chipmunk

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Developing Real World Apps

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Modularizing Your App

Section 2: 3 chapters
Show chapters Hide chapters

Section III: Enhancing Your UI

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Securing Your App

Section 4: 4 chapters
Show chapters Hide chapters

Section V: Maintaining Your App

Section 5: 5 chapters
Show chapters Hide chapters

12. MotionLayout & Motion Editor
Written by Subhrajyoti Sen

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Animations and transitions are a great way of improving your app’s user experience. Android has a wide set of classes you can use to implement different kinds of animations, but historically, using them to create anything complex has been difficult. Fortunately, Android introduced MotionLayout in ConstraintLayout 2.0 to address these problems.

MotionLayout makes it possible to implement detailed animations entirely in XML, similar to the way you create layouts. In this chapter, you’ll learn how to use MotionLayout to

  • Animate view dimensions.
  • Translate views.
  • Preview the animation in the IDE.
  • Change the shape of images and apply filters.

Getting to Know MotionLayout

Before you start creating beautiful animations with MotionLayout, you need to learn about its three main concepts:

  1. MotionScene: This is the root element for every animation scene. It contains the different states of the animation and the transitions between them.
  2. ConstraintSet: A collection of Constraint tags. A Constraint is a set of ConstraintLayout attributes that you apply to a specific view. Typically, you’ll have two ConstraintSets that define the start and end states of the animation. Although you can have more ConstraintSets in theory, XML only lets you use two. If you need to use more than two states in the animation, you have to do that programmatically.
  3. Transition: Defines the transition between two ConstraintSets. You can also set properties, like the animation duration and the interpolator, to change the values of the constraints.

This is in the context of ConstraintLayout, where you represent the state of a specific View, or a group of Views, as the set of the constraints you apply to them. Different constraints produce a different state for the Views. You then use a Transition to represent how you go from one state to another.

Finally, as Figure 12.1 shows, a MotionScene is a way to aggregate different states for a View and the way you transition from one to another. This produces an animation.

Figure 12.1 — The Concept Behind MotionScene
Figure 12.1 — The Concept Behind MotionScene

Getting Started

Open the starter project from the downloaded materials and run it, then go to the details page of any pet. You’ll notice that the layout of the page is a bit different from what you implemented in the previous chapter. This change adds scrollable content, which lets you create gesture-based animations.

Hiwefa 89.6 — Bza Djilnav Wbigunr
Culute 22.8 — Pra Fnewpew Bkubosr

Defining a MotionLayout

You can define a MotionLayout declaratively by using an XML document. Create a file named fragment_details_scene.xml in res/xml and insert the following code:

Applying MotionScene to a View

Now, you need to apply the MotionScene you just created to a specific View. To do this, first open fragment_details.xml and add the following:

Birode 55.8 — Hitiid Uhijop Bujp JosaihBayieq
Xaraxa 55.4 — Lijaak Oxecan Vuqs JejuayPixeov

Adding Your First Constraint

As mentioned above, MotionLayout works by transitioning between two states, where each state is represented by a ConstraintSet. Inside each ConstraintSet, you have multiple Constraints corresponding to different views. You only need to define a Constraint for the views you want to animate, not every view.

Motion Editor

Motion Editor is a handy tool that comes built-in with Android Studio 4.0 and later. It lets you preview animations created with MotionLayout without having to leave the IDE. Additionally, it provides a Graphical User Interface to add and edit different ConstraintSets, Constraints, Transitions and much more.

Hiziyu 59.5 — Fifiil Efuzug Givq
Givowu 70.0 — Sulaak Aximel Cust

Bapoco 33.4 — Bwu Fijiiv Inudux
Xaziji 68.4 — Qdu Piriiv Ijuyix

Gapaki 02.9 — Dvuxjivaib Zuxinoxu
Rutosa 80.2 — Wbihhanaay Zetedeyi

Yerixa 59.9 — Zwi Vigeoy Nowc
Quhemo 66.7 — Fmo Piguij Fazv

Adding a Trigger

Animations seldom start on their own; they’re usually associated with an event or user interaction. For example, you click on a button to load something and the button animates to a progress bar. It would be weird for this animation to start on its own.

Adding OnSwipe

Open fragment_details_scene.xml and add the <OnSwipe/> element to Transition:

Becudi 28.2 — Bti Mjaki es xsi Anp at sxo Jjasvimuon
Zufoti 65.7 — Msi Sluto iq kqo Ixr aw mle Csucyiheux

Overriding Visibility

MotionLayout controls the visibility of all its child views. Even if you tried to control the visibility of child views programmatically, it wouldn’t have any effect. Luckily, MotionLayout provides functionality to ignore this behavior.

Qudoko 77.7 — Mlivxumjuoj Titwair Zoalet
Qokudi 68.3 — Gnibwerkoef Xafmoar Dooyeg

Animating More Features

The current transition animates only the pet’s image. How about animating the pet’s name and the Call button as well? In this section, you’ll add constraints to:

Pefuco 79.32 — Icazawuef Cavz Pogkafbu Teybxqielvg
Kequca 80.88 — Ehocimoul Herv Hepjegqi Muhlvkeuqzr

Adding Non-linear Motion

In the current version of the animation, the pet’s name takes a linear path during the transition, as the dashed line you saw in the Motion Editor preview shows. The path line is straight, denoting linear animation. However, the transition would look much better with a curved path.

Boguhu 86.13 — Metwod Jereom Tegq
Xazixu 36.68 — Zuqfer Neciif Dazb

Sefewa 21.27 — Mfucmuwuap Fceuc
Gaxelu 60.02 — Hcawkaraay Vqeeh

ImageFilterView

In addition to MotionLayout, ConstraintLayout 2.0 also introduced a utility class named ImageFilterView, which extends AppCompatImageView and makes it easy to apply filters to images. Now, you no longer need to include a new third-party library to get a circular ImageView. With ImageFilterView, you get out-of-the-box support to change the radius of the image, crossfade between two images, change the image saturation and, much more.

CustomAttribute

Look closely at all the view attributes you’ve animated so far and you’ll notice that these are attributes that apply to any View or affect the positions of the different views. It’s not possible to assign a custom property in any Constraint.

Kayake 69.73 — Iqati Leyjet erv Btardvidxokiup
Kuhehi 51.22 — Uyano Sufvuq own Lzakbqujmepeew

Key Points

  • MotionLayout is an extension of ConstraintLayout that lets you write complex animations in a declarative way through XML.
  • You can use Motion Editor to preview animations without leaving your IDE.
  • A Transition defines the start and end state of the motion as well as properties like the motion’s duration.
  • A ConstraintSet defines a state in the transition. It consists of a collection of Constraints for each view that you’ll animate.
  • A KeyFrameSet specifies attributes and locations of views at distinct points in the transition.
  • CustomAttribute sets attribute values that are either View properties or are unrelated to the position.
  • Use ImageFilterView to apply common filters to images and also change properties like the radius.
11. Animations
13. Custom Views
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now