MotionLayout is a layout type that helps you manage motion and widget animation in app. MotionLayout is a subclass of ConstraintLayout.MotionLayout is intended to move, resize, and animate UI elements with which users interact, such as buttons and title bars.
We assume here that you have enough knowledge of constraint layout , if not then read from below link and practice it.
The android framework already provides several ways to adding animation in layouts like below
- Animated Vector Drawables
- Property animation framework
- Layout transition animations
- Layout transition with transition manager
- Coordinator layout
Motion layout allows to the transition between two layouts (like transition manager ) , but can animate any property as well (Not just layout attributes) ,moreover it inherently supports seekable transitions like coordinator layout (the transition can be driven purely by touch and transition to any point of it instantly ) it supports touch handling and key frames , allowing developers to easily customize transition to their own needs.
Add the ConstraintLayout dependency:
To use MotionLayout in your project, add the ConstraintLayout 2.0 dependency to your app’s build.gradle file.
- Here is the example how to use motion layout in the app
<?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml -->
Create a MotionScene:
In the previous MotionLayout example, the app:layoutDescription attribute references a MotionScene. A MotionScene is an XML resource file that contains all of the motion descriptions for the corresponding layout. To keep layout information separate from motion descriptions, each MotionLayout references a separate MotionScene.
NOTE: see the file in project xml folder.
- For more detailed look at the various elements of motionscene supports
Motion Layout is Fully declarative
We can fully describe the motion layout in the XML file , no code is expected , if we need to express motion by code the existing property animation framework provides a great way of doing it.
Create a motion Scene
the app:layoutDescription attribute references a MotionScene. A MotionScene is an XML resource file that contains all of the motion descriptions for the corresponding layout. To keep layout information separate from motion descriptions, each MotionLayout references a separate MotionScene. Note that definitions in the MotionScene take precedence over any similar definitions in the MotionLayout.
- motion:constraintSetStart and motion:constraintSetEnd are references to the endpoints of the motion. These endpoints are defined in the <ConstraintSet> elements later in the MotionScene.
- motion:duration specifies the number of milliseconds that it takes for the motion to complete.
- motion:touchAnchorId refers to the view that you can swipe and drag.
- motion:touchAnchorSide means that we are dragging the view from the right side.
- motion:dragDirection refers to the progress direction of the drag. For example, motion:dragDirection=”dragRight” means that progress increases as you drag to the right.
One important thing to keep in mind is how constraint sets work — they will replace all existing constraints of the affected widgets.
We need to have each constraint element contain all the constraints which we want to apply to the widget. Basically this is not applying the delta , it is clearing it all and applying only the constraints we specify.
On the other hand we can say that we have a layout with a dozen widgets but only one that we are animating — the constraint set in the motion scene only needs to contain the constraint for that widget only.
MotionLayout Attributes for development
MotionLayout itself has a few attributes which we want to specify during the development
- app:layoutDescription =”reference” has to point the motion scene xml file
- app:applyMotionScene =”boolean” apply or not the motion scene
- app:showPaths =”boolean” display or not the motion paths
- app:progress =”float” to specify the transition progres from 0 to 1
- app:currentState =”reference” force a specific constraint set
We can take advantage of this to specify transitions on attributes that are not related to the position only. Originally constraint set only encapsulated the layout rules but for
Richer Animations we need to transform other things (for ex a background color) in constraint layout 2.0 constraint se can also store custom attributes state.
Custom attributes are specified with the attribute name, which needs to match the
getter/setter method of an object such that:
- Custom Color Value
- Custom Integer Value
- Custom Float Value
- Custom String Value
- Custom Dimension
- Custom Boolean
When defining a custom attribute ,we need to define it in both constraint sets start and end.
Motion Layout will only provide its capabilities for its direct children contrary to transition manager which can work with nested layout hierarchy as well as activity transitions.