Open In App

Android Motion Layout in Kotlin

Improve
Improve
Like Article
Like
Save
Share
Report

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




<?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>


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




<?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>


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




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)
    }
}


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.



Last Updated : 07 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads