Due to its exceptional versatility, the ConstraintLayout widget has change into the “Swiss Military knife” of layouts for Android app builders. Nonetheless, including complicated animations to its contents, though doable, will be fairly time-consuming. That is why Google launched the MotionLayout widget in I/O 2018.

The MotionLayout widget, which is now part of Android’s assist library, extends the ConstraintLayout widget. It’s a distinctive widget that means that you can animate its contents declaratively utilizing simply XML. Moreover, it presents fine-grained management over all its animations.

On this tutorial, I am going to present you learn how to add it to your Android Studio initiatives and create just a few totally different animations with it.

Stipulations

To comply with this tutorial, you will want:

  • Android Studio three.1.three or greater
  • a tool or emulator working Android API degree 21 or greater
  • a fundamental understanding of the ConstraintLayout widget

1. Add Dependencies

To have the ability to use the MotionLayout widget in your Android Studio venture, you could have the most recent model of the Constraint Format assist library as an implementation dependency. Moreover, as a way to keep away from model conflicts, be sure to embody a dependency for the most recent secure model of the v7 appcompat assist library.

Accordingly, add the next code to the app module’s construct.gradle file:

2. Outline a Format

The MotionLayout widget can do all the things the ConstraintLayout widget can. Due to this fact, you’ll be able to freely exchange any occasion of the latter with the previous. For now, nonetheless, I counsel you create a brand new format XML file and add the MotionLayout widget to it as the foundation aspect.

All through this tutorial, we’ll be animating an ImageView widget. So add it as the primary little one of the format.

You are free to make use of any drawable because the supply of the ImageView widget. Within the above code, I am utilizing a shade drawable.

Subsequent, add a button you’ll be able to press to begin the animations. The next code exhibits you learn how to place it within the middle of the format:

Moreover, to observe the progress of the animations, add a SeekBar widget to the format and place it under the button. Here is how:

Lastly, as a result of there’s an on-click occasion handler related to the button, be sure to outline it in your exercise.

three. Create a Movement Scene

You’ll have observed that we didn’t add any constraints to the ImageView widget whereas defining the format. That is as a result of we’ll be including them to a movement scene as a substitute. A movement scene is an XML file that incorporates particulars concerning the animation you need to create with a MotionLayout widget.

To create a brand new movement scene, create an XML useful resource file and add a MotionScene aspect to it.

A movement scene incorporates ConstraintSet parts specifying the constraints that should be utilized to a widget at totally different factors within the animation. Movement scene information normally include two constraint units: one for the start of the animation and one for the tip.

The next code exhibits you learn how to create two constraint units that can assist the MotionLayout widget transfer the ImageView widget from the underside proper nook of the display screen to the highest left nook:

Be aware that every ConstraintSet aspect should at all times specify each the specified place and the specified measurement. That is essential as a result of it can overwrite any beforehand set format data.

To assist the MotionLayout widget perceive the order through which the constraint units should be utilized, you could subsequent create a Transition aspect. Through the use of its intuitively named constraintSetStart and constraintSetEnd attributes, you’ll be able to specify which set should be utilized first and which final. The Transition aspect additionally means that you can specify the period of the animation.

At this level, the movement scene is full. Nonetheless, the MotionLayout widget continues to be not conscious of it. So return to the format XML file, add a layoutDescription attribute to the widget, and set its worth to the identify of the movement scene file.

If the identify of your movement scene file is my_scene.xml, your MotionLayout widget ought to now appear to be this:

four. Begin the Animation

If you run the app, the MotionLayout widget will robotically apply the constraint set specified within the constraintSetStart attribute of the Transition aspect. Due to this fact, to begin the animation, all it’s good to do is name the transitionToEnd() methodology of the widget. The next code, which should be added to the on-click occasion handler you created in an earlier step, exhibits you the way:

At this level, in the event you run the app and press the button, you must be capable to see the ImageView widget easily transfer throughout the display screen.

//quick.wistia.com/property/exterior/E-v1.js

 

5. Deal with Animation Occasions

By attaching a TransitionListener object to the MotionLayout widget, you’ll be able to carefully monitor the progress of the animation.

The TransitionListener interface has two summary strategies, and Android Studio will robotically generate stubs for them.

The onTransitionCompleted() methodology known as when a transition from one constraint set to a different is full. For now, let’s use it to reset the constraints of the ImageView widget by calling the transitionToStart() methodology inside it.

The onTransitionChange() methodology known as each time the progress of the animation adjustments. As such, the progress is a floating-point quantity that lies between zero and one. The next code exhibits you learn how to replace the SeekBar primarily based on the progress of the animation:

Go forward and run the app once more to see two animations now.

//quick.wistia.com/property/exterior/E-v1.js

 

6. Create Key Frames

In our animation, the ImageView widget strikes in a path that appears like a straight line. That is as a result of the MotionLayout widget is given solely two factors to work with: the start line, which is on the backside proper nook of the display screen, and the ending level, which is on the prime left nook of the display screen. If you wish to alter the form of the trail, you will have to offer just a few intermediate factors, which lie between the beginning and ending factors. To take action, you will must create new key frames.

Earlier than you begin creating key frames although, you could add a KeyFrameSet aspect to the Transition aspect of your movement scene. Inside the brand new aspect, you’re free to create any variety of key frames.

The MotionLayout widget helps many several types of key frames. On this tutorial, we’ll be working with solely two varieties: KeyPosition frames and KeyCycle frames.

KeyPosition frames are those that show you how to alter the form of the trail. Whereas creating them, be sure to present the ID of the goal widget, a place alongside the timeline, which will be any quantity between Zero and 100, and the specified X or Y coordinates specified as a share. The coordinates can both be relative to the precise X or Y axes or be relative to the trail itself.

The next code exhibits you learn how to create two key frames that power the ImageView widget to comply with a path that avoids collisions with the button and the search bar:

If you happen to run the app now, you must see an animation that appears like this:

//quick.wistia.com/property/exterior/E-v1.js

 

You’re, in fact, free so as to add extra key frames. For instance, by including the next key body in the direction of the tip of the timeline, you may make the ImageView widget comply with a extra wavy path:

Through the use of a KeyCycle body together with the KeyPosition frames, you’ll be able to add oscillations to the animation. Whereas creating it, you could once more present the ID of the goal widget, a place alongside the timeline, and the specified worth of the property that has to oscillate forwards and backwards. Moreover, you could configure an oscillator by offering particulars such because the wave form to make use of and the wave interval.

The next code creates a KeyCycle body that makes use of a sine-wave oscillator to periodically rotate the ImageView widget by 50 levels:

On working the app once more, you must see an animation that appears like this:

//quick.wistia.com/property/exterior/E-v1.js

 

7. Make Animated Widgets Interactive

All this whereas, you have been urgent a button to begin the animation. Such a button, nonetheless, just isn’t at all times essential as a result of the MotionLayout widget means that you can instantly connect contact occasion handlers to the widgets being animated. At present, it helps the on-click and the on-swipe occasions. 

As an example, you’ll be able to add the next OnClick aspect, which targets the ImageView widget, contained in the Transition aspect of your movement scene to make the button redundant:

Equally, you need to use an OnSwipe aspect to permit the consumer to manually drag the ImageView widget throughout the display screen. Whereas creating the aspect, you could be sure to present the correct drag route and the facet of the widget that ought to act because the drag deal with.

If you happen to run the app once more, you must now be capable to drag the ImageView widget.

//quick.wistia.com/property/exterior/E-v1.js

 

Conclusion

You now know learn how to use the MotionLayout widget to rapidly add complicated, interactive animations to your Android apps. You possibly can make certain that the animations will run with none lag or jitter on most units, as long as you keep away from nested views.

It is price noting that upcoming releases of Android Studio will embody a visible Movement Editor, which is more likely to additional enhance the usability of the widget.

To be taught extra, do check with the official documentation.



Supply hyperlink

LEAVE A REPLY

Please enter your comment!
Please enter your name here