Part 1: MotionLayout with layout files.

What is MotionLayout and layout files.

Vladislav Shesternin
3 min readDec 1, 2020

The article describes a non-standard method for creating animations, but the best solution for creating animations is to use the MotionLayout editor, which you can learn more about here.

This is a series of 4 consecutive parts dedicated to creating animations using MotionLayout with layout files.

Part 2: Сreating animation with MotionLayout and layout files.

Part 3: MotionLayout — Transformation of components.

Part 4: KeyPosition — changing animation path.

Photo by Sean O. on Unsplash

MotionLayout — it is a subclass of ConstraintLayout designed to animate child elements.
MotionLayout available with ConstraintLayout version: “androidx.constraintlayout:constraintlayout:2.0.0”.

layoutDescription — xml attribute MotionLayou, contains the path to MotionScene, it is thanks to him that MotionLayout has the ability to animate the child element.

motionDebug — xml attribute MotionLayou, intended for debugging animation, has four states:

NO_DEBUG
SHOW_PROGRESS
SHOW_PATH
SHOW_ALL

Layout file(state) — it is a layout file consisting of a parent ConstraintLayout and the same children as in MotionLayout.

Start layout file — it is the file where it all starts, its parent is MotionLayout.

Each layout file is a specific state of the animation, an example of an animation consisting of four layout files:

state_1
state_2
state_3
state_4

MotionScene — this is a file located in the xml folder, serves as an instruction for MotionLayout, it is the path to it in MotionLayout that is indicated in the layoutDescription = “@xml/motion_scene” attribute.

location motion_scene

MotionScene consists of Transition, ConstreintSet.

ConstraintSet — this tag is considered and will not be used due to problems with it.

Transition — is the main tag MotionScene, designed for transitions between start and end states (layout files).

The main features of Transition are perfectly described in an article by one of the creators of MotionLayout.

Conclusion:

In order to start creating animation you will need:

I. Сreate MotionLayout or convert ConstraintLayout into it.

II. Create layout files (states).

III. Create MotionScene.

In the next article you will create your first animation using MotionLayout and layout files (states) and KeyAttribute.

--

--