Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Android Motion Layout in Kotlin
What is Motion Layout in Android?
Motion Layout is a child class of Constraint Layout in Android. It inherits properties from Constraint Layout. This layout is used to manage motion and layout animations for the widgets within the android application. Motion Layout is used to provide gesture control animations such as wipe down, swipe up and other types of motions within our android application.
Implementation of Motion Layout in Kotlin
We will be creating a simple application in which we will be simply displaying two text views. We will be adding these text views within our Motion Layout and adding a swipe animation to change the background color of the application and the text color of our text view. We will be following a step by step guide to implement a Motion Layout in our Android application using Kotlin.
Step 1 : Creating a new project in Android Studio
Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.
After clicking on New Project you will get to see the below screen.
Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.
Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.
Note − Make sure to select the Language as Kotlin
After specifying all the details click on Finish to create a new Android studio project.
Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.kt file.
Step 2 : Adding dependency in build.gradle file to use this library
Navigate to Gradle Scripts>build.gradle file and add the below dependency in dependencies section.
implementation 'androidx.constraintlayout:constraintlayout:2.2.0-alpha05'
After adding the above dependency you will get to see the Sync Now option in the top right corner of your IDE. Simply click on it to sync your project and install this dependency within your project.
Step 3 : Working with activity_main.xml
Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_layout" tools:context=".MainActivity"> <!-- creating a frame layout on below line--> <FrameLayout android:id="@+id/idFLContainer" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- creating a constraint layout on below line--> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/idConstraintLayout" android:layout_width="match_parent" android:layout_height="0dp" android:background="#353442" /> <!-- creating a text view for heading on below line--> <TextView android:id="@+id/idTVHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Motion Layout in Android" android:textSize="25sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> <!-- creating a text view for sub heading on below line--> <TextView android:id="@+id/idTVSubHeading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="70dp" android:text="Hello World!" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="@id/idFLContainer" app:layout_constraintEnd_toEndOf="@id/idFLContainer" app:layout_constraintStart_toStartOf="@id/idFLContainer" app:layout_constraintTop_toTopOf="@id/idFLContainer" /> </androidx.constraintlayout.motion.widget.MotionLayout>
Explanation − In the above code we are creating our root layout as Motion Layout and inside this we are specifying our motion layout description as our animation xml file. Inside this motion layout we are creating a frame layout. Below is this frame layout we are creating our constraint layout for which we are specifying a background color. After creating this constraint layout we are creating a Text view inside which we are specifying id and displaying our application heading in it. After that we are creating one more text view in which we are displaying sub heading of our application.
Step 4 : Creating a new xml file for adding Motion Scene for our Motion Layout.
Navigate to app>res>xml>Right click on it>New XML Resource file and name it as motion_layout and add below code to it.
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetEnd="@+id/endTransition" app:constraintSetStart="@+id/startTransition" app:duration="100" app:motionInterpolator="linear"> <OnSwipe app:dragDirection="dragUp" /> </Transition> <ConstraintSet android:id="@id/startTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="#FF000000" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@id/endTransition"> <Constraint android:id="@id/idTVHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idTVSubHeading"> <CustomAttribute app:attributeName="textColor" app:customColorValue="@android:color/white" /> </Constraint> <Constraint android:id="@id/idConstraintLayout" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
Explanation − In the above code we are creating a Motion Scene for our Motion Layout. Inside this Motion Scene we are firstly creating a Transition animation which we have to display. Inside this Transition we are adding constraintSetEnd, constraintSetStart, duration, motionInterpolator as linear and inside this we are adding onSwipe drag direction as dragUp. After that we are creating a constraint set We are adding this constraint set for startTransition.
Inside this Constraint Set we are creating our first Constraint for our heading text view and second Constraint for our subheading text view. Inside each Constraint we are adding a Custom Attribute. Inside this custom attribute we are adding the key as text color and value for it as the color which we have to add for our text.
After that we are creating a constraint inside which we are specifying id and constraint from all sides as parent.
Similarly we are creating a more constraint set which we are displaying for end transition. Inside this constraint set we are again creating 3 constraints one for our heading text view, second for sub heading text view and another for our Constraint Layout. Inside this Constraint Layout we are changing our custom color value for each constraint which is different from the other which we have added in our first constraint.
After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.
Note − Make sure you are connected to your real device or emulator.
Conclusion
In the above tutorial we learn What is Motion Layout in Android and how we can use that Motion Layout within our android application to display animations for different widgets within our android application.
639 Views
