Android Motion Layout in Kotlin

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.

motion layout

Why MotionLayout?

  • 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.

Approach:

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:

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta7’

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.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/new_xml"
    tools:context=".MainActivity">
  
    <FrameLayout
        android:id="@+id/textViewContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#185416"/>
  
    <TextView
        android:id="@+id/tvHelloWorld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Geeks for Geeks!"
        android:textSize="50sp"
        app:layout_constraintTop_toTopOf="@id/textViewContainer"
        app:layout_constraintBottom_toBottomOf="@id/textViewContainer"
        app:layout_constraintStart_toStartOf="@id/textViewContainer"
        app:layout_constraintEnd_toEndOf="@id/textViewContainer"/>
  
</androidx.constraintlayout.motion.widget.MotionLayout>

chevron_right


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



create new xml file

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

Creating XML resource file

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:

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:motion="http://schemas.android.com/tools">
  
    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end"
        app:duration="100"
        app:motionInterpolator="linear">
  
        <OnSwipe
            app:dragDirection="dragUp"/>
  
    </Transition>
  
    <ConstraintSet android:id="@id/start">
        <Constraint
            android:id="@id/tvHelloWorld">
            <CustomAttribute
                app:attributeName="textColor"
                app:customColorValue="#175416" />
        </Constraint>
  
        <Constraint
            android:id="@id/swipeLayout"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </ConstraintSet>
  
    <ConstraintSet android:id="@id/end">
        <Constraint
            android:id="@id/tvHelloWorld">
            <CustomAttribute
                app:attributeName="textColor"
                app:customColorValue="@android:color/white" />
        </Constraint>
  
        <Constraint
            android:id="@id/swipeLayout"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </ConstraintSet>
  
</MotionScene>

chevron_right


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:

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

package com.example.motionlayoutgfg1
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
    class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.