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.
- Why Kotlin will replace Java for Android App Development
- How to create project in Android Studio using Kotlin
- Android EditText in Kotlin
- Android LinearLayout in Kotlin
- Android RelativeLayout in Kotlin
- Android ListView in Kotlin
- Android FrameLayout in Kotlin
- Android TableLayout in Kotlin
- Android Toast in Kotlin
- Android Fade In/Out in Kotlin
- Android Slide Up/Down in Kotlin
- Android Animations in Kotlin
- Android progress notifications in Kotlin
- Kotlin Android Tutorial
- Difference between Java and Kotlin in Android with Examples
- Why You Should Switch to Kotlin from Java to Develop Android Apps?
- How to send message on WhatsApp in Android using Kotlin
- Thread Priority in Kotlin & Android
- Running User Interface Thread in Android using Kotlin
- How to Add RangeSeekbar in Android Using Kotlin?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.