Introduction to MotionLayout (part II)
This is part II of a series of articles introducing MotionLayout. If you haven’t yet, please check part I !
In this article, we will continue covering basic MotionLayout features through various examples, introducing custom attribute interpolation, image operations and keyframes.
Example 03 : Custom attribute
In part I we last created a MotionLayout with a self-contained
MotionScene. We can take advantage of this to specify transition on attributes that are not related to the position only.
ConstraintSet only encapsulated the layout rules; but for richer animations, we often need to transition other things (for example, a background color). In ConstraintLayout 2.0,
ConstraintSet can also store custom attribute states. Let’s say we want the following motion, where our view’s background will change color:
Previously, you would have had to handle this in code. Now, you can instead specify the attribute directly in XML:
Here’s the modified MotionScene file for the above animation:
CustomAttribute are specified with the attributeName, which needs to match the getter/setter methods of an object such that:
The value type also needs to be specified:
Lastly, when defining a custom attribute, you do need to define it both in the start and the end ConstraintSet.
Example 04 : ImageFilterView (1/2)
When dealing with complex transitions, there’s often the need to do some operations on images, and animating them. ConstraintLayout 2.0 brings a small utility class called ImageFilterView (which is a subclass to AppCompatImageView) to easily allow this.
Let’s do for example a simple cross-fade between two images, such as:
We first need to create a MotionLayout file with the image:
The main difference from a normal ImageView here is the
The MotionScene file will simply apply a custom attribute on the crossfade property:
Example 05 : ImageFilterView (2/2)
ImageFilterView offers more capabilities:
saturation : 0 = grayscale, 1 = original, 2 = hyper saturated
contrast : 1 = unchanged, 0 = gray, 2 = high contrast
warmth : 1 = neutral, 2 = warm (red tint), 0.5 = cold (blue tint)
Here’s another example showing how to play with an image saturation:
Specifying the saturation can be done simply by using a custom attribute:
Here’s the MotionLayout file we use in this example:
And here’s the corresponding scene file:
The general idea for MotionLayout is that “resting states” are implemented as ConstraintSets. This way, we know that the resulting layouts will correctly adapt to different screen sizes: essentially, MotionLayout will behave like a typical ConstraintLayout.
In some situations, you may want to have an intermediate state — a state to go through, but not a state to stay in. You could specify more than two ConstraintSets, but a more lightweight approach is to use Keyframes.
Keyframes can be applied to position or to attribute values; they basically let you specify a change at a point in time during the transition.
For example, you may want to say that at 25% of the transition, the widget should turn red. Or that at 50% of the transition, the widget should move up.
Example 06 : Keyframe (1/2), position
There are several ways (
parentRelative) you can set up a position keyframe (
KeyPosition), which we will cover in detail in part IV of this series.
As a quick introduction to position keyframes, here’s how you would specify an intermediate position happening at 50% of the total transition, positioned 25% of the screen:
The resulting motion will be:
As usual, the MotionLayout file itself is pretty simple:
The MotionScene file is very similar to the previous ones we already saw, with the addition to a
Example 07 : Keyframe (2/2), attribute
In a similar manner to position keyframes, you can specify an attribute value at a specific point in the transition (using
For example, we may want to specify the scale and rotation of the object we are manipulating at the same 50% position to get the following transition:
This can be achieved by adding a
KeyAttribute element in the
MotionLayout file is the same as in the previous example, and the only difference in the
MotionScene file is adding the
This second article covers more advanced functionalities of MotionLayout, giving examples of how to take advantage of custom attributes and keyframes to create more compelling animations.
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.