Getting Started with Motion Editor – Android Studio 4

Android Studio 4.0 is quite a big update for the IDE and offers a lot of possibilities for developers. Perhaps the most exciting new feature is the “Motion Editor”. This feature is designed to help developers create more engaging animated layouts. It can dramatically improve the user interface of any app, and now it’s a lot less complicated to do!

Read also : An Introduction to Jetpack Compose for Fast Android UI Designs

The basics

Previously, to animate a layout, you had to manually edit the XML. This new editor makes the process much easier by generating this code for you and allowing you to manage the actual design using a visual editor. In theory at least!

This being Google, the implementation is not entirely intuitive

It certainly makes life easier and is a welcome addition. But this being Google, the implementation is not entirely intuitive and some key features are currently missing. We hope this guide will help you get started and understand the new tool.

Establishment

To get started, you first need to make sure that you have Android Studio 4.0, which is now available on the stable channel. You should also make sure that you are using the following ConstraintLayout dependency, as MotionLayout is part of the Beta of the Constraint Layout.

Coded

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

Coded

com.android.support.constraint:constraint-layout:2.0.0-beta1

Next, you will need to configure a new layout resource file. Make sure the root element is set to: androidx.constraintlayout.motion.widget.MotionLayout.

Read also : Android Studio Tutorial for Beginners

Once it’s built, you’ll be taken directly to the brand new motion editor!

At the moment, you will see a message telling you that the motion editor cannot be used and that you have a MotionScene syntax error. Good start!

Create your first MotionScene

First of all, we need to create a motion scene.

The MotionScene object describes how the elements will be animated in the MotionLayout. To define this object, we need to create another XML file in the XML folder. This will then list the layout states that can be used and how to move between them.

Here is the motion editor

Also, some other IDEs would have done this automatically when you first created the new MotionLayout. But I digress!

Fortunately, Android Studio makes it a bit easier for us. Just click on the red exclamation next to where it says “MotionLayout” in the component tree, and you’ll be prompted to create a new MotionScene file. Click ‘Fix’ and it will generate this on your behalf and put it in the right place!

The automatically generated file will receive the name of your layout file with “_scene.xml” appended. My layout file is called “motionlayoutexample” and my scene is called “motionlayoutexample_scene.xml”.

Your scene should contain the following XML:

Coded












For now, the widget this refers to doesn’t exist, but we’ll fix it next.

Go back to the motion layout, then choose the code view. I’ll drop Google’s own example here:

Coded





Note that I changed the MotionScene file to my own motionlayoutexample_scene. This layout simply shows a button on the screen with the ID “button”.

Annoyingly, I had to restart Android Studio before it recognized that I had correctly added the layout description. Try this if you have any problems!

Ready for motion layout

Once that’s done, you should be able to go into design mode and see a bunch of new commands you can play around with. You will also notice that there is a button at the top left of the screen!

How to animate

The controls on the right allow you to see two states that the layout can adopt: a “start” state and an “end” state. You will also see the “base state” which is what you are looking at now, as defined in your layout folder.

Android Studio actually calls them “ConstraintSets”. The icon at the top left of this window (which looks like two nodes with a little green plus below) will allow you to create a new state. The next tool (the arrow) defines a new transition between these states. The third finger icon lets you define actions that trigger transitions and state changes. This is called a click or swipe manager.

Move button end state

Check the motionlayoutexample_scene XML file and you will see the “Start” and “End” constraint tags that define these two layouts. You will also find the transition tag which tells Android that there is some kind of transition between the two.

You can choose one of the states to display them in the editor on the left.

Let’s try to go to the “end” state. Once it is selected, you will edit the constraints to place it at the bottom of the screen.

Go back and the button should magically reappear at the top! Again, it took a little while for Android Studio to play ball on me. But you can also achieve the same effect by editing the XML in your scene with the start position defined in the first constraint and the end position in the second.

Here’s how Google did it:

Coded







To see the animation in action, just click on the transition itself (the arrow above the two states) and then click play. You should now see the button repeatedly sliding down the screen! You can also set keyframes this way for more advanced animations.

Finally, decide what you want to trigger this animation using the click or swipe manager. Just choose the transition to deploy from the first drop-down list, then choose the view you want to save the action to.

Where to go from here

While the tool is a bit complicated and buggy at the moment, it certainly has a lot of potential. And there’s more you can do with that too!

Of course, you can add new views as you normally would through the editor (make sure the default motion layout is selected). You can also add new states and transitions between them. If you want to add custom elements to your animations (like color changes), you can do so using custom attributes. Hopefully this will be integrated into the editor itself in the future.

Click manager

Check out Google’s official documentation for more details. Hopefully this introduction has educated you on the basics and now you have a good idea of ​​what can be done with the new motion editor and how to get started. Let us know how you are doing in the comments below!


Source link

Comments are closed.