MotionLayout “Simple Way To UI Has Beautiful Motion Effect And More

To create the motion for the screen as above you will have to handle the animation for each view very complex, maybe at first you will be confused with CollapsingToolbarLayout in Android. When you look carefully, it will not be so. Satisfying this requirement you will have to create multiple files (xml animations in the anim folder) and then attach them to the child views, followed by the action of dragging and dropping the view group. Say so much to do!

Today, I will learn about MotionLayout with Google integrated into the ConstraintLayout library from version 2.0, although it is still quite new, but since the layout has been strongly supported for the Material Design interfaces and users. The interaction feels like it's "much better". So is there anything I don't start right away …?

(The whole structure image of MotionLayout)

Basic ingredients and how to integrate

Integrate into the project only 3s, fast:

Although MotionLayout has been from version 2.0, the latest version is "2.0.0-beta1" so I use this version

The reason for the structure of MotionLayout is so much so I talk about 2 main parts in it, I hope that the following article will update you more.

MotionScene

Unlike a normal layout that you use often, all layouts displayed with parameters will be created and saved in another res / xml determined by MotionScene (image). It contains all that is needed for animation.

Including components:

• ConstraintSets
• StateSet
• Transition

ConstraintSet

This is an important component in MotionScene, as you saw in part a. It is imperative: 1 MotionLayout must always have at least 2 start and end state, so it has at least 2 ConstrainSet

Ingredient:

• Constraint: where to adjust the properties of the view in MotionLayout such as: size, color, position … Just need to provide the child view id exactly, it will automatically execute for you.
• CustomAttribute: You can create individual properties for each View as follows:

customColorValue

customIntegerValue

customFloatValue

customStringValue

customDimension

customBoolean

Next I will say a part of Transition

Transition

Even that name indicates its function, perform the conversion of ConstraintSet from start to end according to the way you install. Of course it will need a user action to interact with that view. Here it supports 2 main actions:

• OnClick: Clicking on a view operation does a transition
• OnSwipe: Swipe from A >> B

After that, I will say more clearly in the example below because now I need to have actual code to see it quickly!

Deploying direct examples

With the original image, we will always take this example to feel a little different from the usual way! I will go from the step of creating the main view always and remove the import library step because it is very simple, everyone just copy my import line above is done.

The first step is to create motion_info_detail.xml where the view of the Information Detail screen is displayed as follows:

motion_info_detail.xml

Above I used custom animation extended from Constrain Helper, I named that class "ArrowFlyinBounceHelper" task of creating an effect to fly out at the beginning of the arrow. (You can see in the image file for example)

That class is as follows:

ArrowFlyinBounceHelper.kt

You probably remember, for each xml file for MotionLayout you will have to create a Scene file for it specific to that file located in the folder: res / xml If you haven't already, create this folder.

scene_info_detail.xml

Apply to the above theory you saw immediately in this MotionScene I have 2 states (start and end), for example in start state:

When you first enter the screen you want the detail image to be fullscreen, point the id of img_detail to this Constraint and set the required attributes (remember to point the correct id set on the layout motion. Next when the end state is If you want any detail detail to be exactly "426dp", I changed the properties as follows: Looking at each code slowly, it is easy to see.

So similar to the other child views, you only change the size and position. Next to the important part is Transition, we have installed some properties:

• motion: duration = "1000 ″: delay in 1s
• motion: motionInterpolator = "linear": action swipe is executed vertically

The rest is "KeyFrameSet" I will say in the following article because the content of this section will be very long to understand this section.

summary

As you can see, designing a interface with our desired effect is much simpler, you just need to install the animation in xml without having to touch the logic code. All transitions like this have MotionScene worried, and the result is very smooth motion that feels like it "Keeping Hands". This is the biggest advantage when using MotionLayout, you can also perform more complex animations and directly explain to users what the Application function is.

Source : viblo.asia