Part 3: MotionLayout — Transformation of components.

How to transform components of MotionLayout.

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.


In this series, you will learn how to transform MotionLayout components.

The purpose of this part is:


Step 1

Create FirstAnimation by example or clone a project with GitHub and open FirstAnimation.
Or even easier: clone the project with GitHub and open a ready-made TransformationAnimation.

Step 2

Open up app -> res -> layout -> state_1:

Path and state_1.

Step 3

Trnsforformation rotation in state_1:

rotation = “360”.

Step 4

Trnsforformation scale in state_1:

scaleX = “2”, scaleY = “2”.

Step 5

Trnsforformation alpha in state_1:

alpha = “0.5”.

Step 6

Trnsforformation background color use CustomAttribute in activity_main_scene.xml:

Change background color.

To understand KeyFrameSet read an article by one of the creators MotionLayout.

Step 7 — ImageFilterView

Trnsforformation background image with ImageFilterView use CustomAttribute in activity_main_scene.xml:

Transform View to ImageFilterView.
app -> res -> drawable -> New -> VectorAsset.
Two Images.
Change activity_main and state_1.


To transform a component you can use all attributes available to the component. <<<Experiment>>>

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



LibGDX | Android | Developer | DragonBones | Enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store