MotionLayout is a special version of ConstraintLayout. It is a layout that helps to manage motion and widget animations in the app. Since it is a special version of ConstraintLayout, it is made as a sub-class of ConstraintLayout. It provides touch control motion to the app by describing how to transition between different layouts. In a nutshell, it is very powerful and can be used to create extensive animations and touch-controlled motions in the app.
- MotionLayout, as its name hints at, is, first of all, a layout, letting you position your elements. It’s actually a subclass of ConstraintLayout and builds upon its rich layout capabilities.
- MotionLayout was created to bridge the gap between layout transitions and complex motion handling.
- Beyond this scope, the other key difference is that MotionLayout is fully declarative that it can be fully described in XML, there is no code is expected.
Below are the various steps to create a motion layout in Kotlin.
Step 1: Start a new Android Studio project
Please refer to this article to see in detail about how to create a new Android Studio project.
Step 2: Adding MotionLayout class to the Project
This is a necessary step since without this, our app will cease to run. Since MotionLayout is a subclass of ConstraintLayout, it is a fairly new addition to the Android family and the chances are pretty high that we don’t have it in our project by default. To add it to our project, we need to add the following dependency to our build.gradle: app:
We will need to do a gradle sync following the change we have made. Once it is successful, we can continue to build the rest of the app.
Step 3: Making MotionLayout as the root layout
In this step, we will be designing the activity_main.xml file. We will use MotionLayout as our root XML element and define its attributes such as height and width. It should be noted that a MotionLayout can contain other layouts such as ConstraintLayout, RelativeLayout, FrameLayout nested inside it. It also contains all the views such as TextView and Button that we want in our UI. Let’s look at the code for activity_main.xml for our app.
Notice that in the above code, we have an attribute called app:layoutDescription which has the value @xml/new_xml. This actually is the file that contains the description of how our animation is and what it should do. We haven’t made this file yet but will make it in the next step. The code also has a ConstraintLayout which is a part of the animation. It will basically cover the screen when the animation takes place. Next, we have a single TextView which will be displayed on our screen.
Step 4: Making a new xml file
Just like we said, we will now make the new_xml.xml file which was set as the value for app:layoutDescription in our previous code. To do this, we first need to create a new XML resource file. First, we will create a directory in our resource folder and name it xml. For this, click on app -> res(right-click) -> New -> Directory
Now that we have an xml directory, we will create a file named new_xml in it. To do this, click on xml(right-click) -> New -> XML Resource File and name the file new_xml.
Step 5: Adding code to new_xml.xml
Now that we have everything ready, we can define how our animation should be in new_xml.xml. We start by opening a MotionScene XML tag. In this example, we will just make a basic transition animation using the Transition attribute and define when it should occur i.e DragUp, DragDown, DragLeft, etc by setting the OnSwipe element. This is how our code looks:
To know what other animations can we apply, check this link : https://developer.android.com/training/constraint-layout/motionlayout#additional_motionlayout_attributes .
Step 6: MainActivity.kt File
Now we have everything we need to make our app work. Just one little thing to note is that we haven’t made any changes so far to our MainActivity.kt file. This is because we are just designing the UI and not the logic of the app. In case someone wants their app to do something, there will definitely be some code in the above files but for this example, this is how our MainActivity.kt looks like:
Run as Emulator
Since in our new_xml.xml file we defined that our animation transition will take place when we swipe up(dragUp), this is what our output looks like when we do so.