MotionLayout is a brand new layout that introduced with ConstraintLayout 2. It is sub-class of ConstraintLayout.It has all the properties of ConstraintLayout.

MotionLayout touch

The whole trick with animating between two constraint sets that will be done for you by MotionLayout.If you have two constraint sets, it will switch between them by itself. It’s a ConstraintLayout, you can actually use the helpers. It also provides you with the ability to edit the custom attributes of the system.

You’ll notice the blue icon there. It’s changing because it’s a custom attribute in the system.ConstraintSet can handle custom attributes.

One of the other things that are done is it allows you to control on touch directly. It’ll manage your touch events by tracking the velocity of your finger and matching it to the velocity of views in the system and naturally give you a smooth transition between them via touch.

MotionLayout architecture

MotionLayout also supports helpers because it’s just a ConstraintLayout and they can work together and apart.

We want to move the ‘i’ into the middle of the screen. But if we look closely,there’s a bit of a problem here. You see the arrow clashes with the ‘i’.

KeyFrame error

You can fix using KeyFrame.

KeyFrame


If you have a beginning and an end of a path, you can distort the path by adding a KeyFrame. Once we add the KeyFrame, it will avoid the path, which is pretty cool.

MotionLayout KeyFrame

MotionLayout KeyFrame 2

 

Now we have a motion scene. It has ConstraintSets. It has on touch KeyFrames, CustomAttributes with a little flag on your device, you can see the path of all the objects you’ve set in it. You can understand what all your views are doing on the device.

MotionLayout path

Nested MotionLayouts


One of the nice things that support in it is nesting of constrained sets of MotionLayouts.In this particular example, We have two views being animated by a third view. They’re both constraint MotionLayouts.They’re both being driven by a third MotionLayout.The top view is just doing a fade to black. You’ll notice something else in that view. This is an animated view that was custom written that is being driven by MotionLayout because it implements an on-progress method. You can drive your own custom animation directly from MotionLayout.

Nested Motion Layouts

Synchronized Movements


One of the things it’s really good at is synchronizing motions. Anything that’s very complex, sequences of many things moving on the screen, it will handle it, and will also allow you to interact the touch.

Synchronized Movements

KeyCycles


The ability to build into the KeyCycles is oscillatory behaviors. It can vibrate and shake in various ways and you might wonder, what do we do with these KeyCycle?

MotionLayout KeyCycles

In this particular example, first just unfold them with a staggered effect. But you can take one and have it roll because it’s oscillated or I can do a different effect. I could have it sort of bounce along the edge. Another typical example, you put it like doing a little shake at the end.

Motion Editor


One of the cool things is Motion Editor. Android has built an editor for that thing. It’s part of the design surface. You’ll be able to do those edits directly in the design surface.

Motion Editor

Create your constraints for your first ConstraintSet, switch to the second, edit the constraints for the second ConstraintSet. Once you do that, if you hit play, it will show you the animation between those two ConstraintSets.

There’s a checkbox to enable showing you the path. You could see the path.

ConstraintSet path in Motion Editor

Add KeyFrame


You just position the cursor where you want it. You add the type of KeyFrame that you want to add. You can just distort the position by selection the KeyFrame and move it around on the screen.

Add KeyFrame

 

Leave a Reply