Motion Layout Android

Published On: 1 April 2021.By neeraj vijayvargiya.

Mobile

Motion Layout Android

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.

prerequisites

We assume here that you have enough knowledge of constraint layout , if not then read from below link and practice it.

https://developer.android.com/training/constraint-layout

Why MotionLayout?

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.

Getting Started

Add the ConstraintLayout dependency:

To use MotionLayout in your project, add the ConstraintLayout 2.0 dependency to your app’s build.gradle file.

dependencies {

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0beta3’

}

Here is the example how to use motion layout in the app

  <?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml -->
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    tools:showPaths="true">

    <View
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent"
        android:text="Button" />

</androidx.constraintlayout.motion.widget.MotionLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.motion.widget.MotionLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/motionLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layoutDescription="@xml/scene_01"

tools:showPaths="true">

<View

android:id="@+id/button"

android:layout_width="64dp"

android:layout_height="64dp"

android:background="@color/colorAccent"

android:text="Button" />

</androidx.constraintlayout.motion.widget.MotionLayout>

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

https://developer.android.com/training/constraint-layout/motionlayout/examples

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.

Transition

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.

OnSwipe

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.

ConstraintSet

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

Custom Attributes

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.

Limitations

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.