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

Detailed instructions for creating animations with MotionLayout and layout files.

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 1: MotionLayout with layout files.

Part 3: MotionLayout — Transformation of components.

Part 4: KeyPosition — changing animation path.

Photo by ål nik on Unsplash

The purpose of this part is implement:

OnSwipe or OnClick.

In this part you will understand the basic concept of creating animations with MotionLayout and layout files, and you yourself will create or clone a finished project with animations on GitHub.

If you cloned the project with GitHub then open FirstAnimation in this part it will be used.

Step 1

Сreate a project with empty activity:

Create new project.

Step 2

Name the project and indicate where to save it:

Create new project.

Step 3

Open up app -> res -> layout -> activity_main.xml (start state):

app -> res -> layout -> activity_main.xml.

Step 4

Сonvert ConstraintLayout to MotionLayout:

Сonversion ConstraintLayout to MotionLayout.

Step 5

In MotionLayout delete everything and create your view with “@+id/view” ID:

Creating a view in start state.

Step 6

Open up app -> res -> layout -> new -> Layout Resource File and create a second layout file (end state) in it:

Create second layout file (end state).

Step 7

Open up state_1 and in it we create the same component as in MotionLayout and with the same ID the differences are only in the constraints:

Create view in end state.

Step 8

Open up app -> res -> xml -> activity_main_scene.xml — this file is generated automatically when converting ConstraintLayout to MotionLayout:

app -> res -> xml -> activity_main_scene.xml.

Step 9

In MotionScene we delete everything and create our own Transition with our layout files (states):

Transition with our layout files (states).

Add events to which the animation will react:

OnClick or OnSwipe.

Step 10

Run the application.

Conclusion:

To create beautiful animations in Android use MotionLayout with layout files (states). <<<Experiment>>>

In the next part you will learn how to transform components, use ImageFilterView, and KeyAttribute with CustomAttribute.