MotionLayout is a layout type that helps you manage motion and widget animation in your app. MotionLayout is a subclass of ConstraintLayout and builds upon its rich layout capabilities.
As part of the ConstraintLayout library, MotionLayout is available as a support library and is backwards-compatible to API level 14.
Using MotionLayout in App Project
Let’s get into simple motion layout example code. Follow these simple steps to start using MotionLayout in your project.
1: First you need to add the ConstraintLayout dependency:
Add the ConstraintLayout 2.0 dependency to your app’s build.gradle file. If you’re using AndroidX, add the following dependency:
|
1 2 3 |
dependencies { implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1' <span class="pln">} </span> |
If you not using the AndroidX, add the following support library dependency:
|
1 2 3 |
dependencies { implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1' } |
2: activity_main.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?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:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/activity_main_motion" tools:context=".MainActivity"> <androidx.appcompat.widget.AppCompatImageView android:id="@+id/header_image" android:layout_width="0dp" android:layout_height="0dp" android:scaleType="centerCrop" app:layout_constraintBottom_toTopOf="@+id/desc_tv" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/background_logo" /> <TextView android:id="@+id/desc_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:paddingStart="24dp" android:paddingEnd="24dp" android:paddingBottom="32dp" android:text="@string/random_string" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:lineHeight="26dp" /> <TextView android:id="@+id/title_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:padding="24dp" android:text="@string/test_title" android:textColor="@android:color/white" android:textSize="22sp" app:layout_constraintBottom_toBottomOf="@+id/header_image" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout> |
3: activity_main_start.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.appcompat.widget.AppCompatImageView android:id="@+id/header_image" android:layout_width="0dp" android:layout_height="0dp" android:scaleType="centerCrop" app:layout_constraintBottom_toTopOf="@+id/desc_tv" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/background_logo" /> <TextView android:id="@+id/desc_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:paddingStart="24dp" android:paddingEnd="24dp" android:paddingBottom="32dp" android:text="@string/random_string" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" app:lineHeight="26dp" /> <TextView android:id="@+id/title_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:padding="24dp" android:text="@string/test_title" android:textColor="@android:color/white" android:textSize="22sp" app:layout_constraintBottom_toBottomOf="@+id/header_image" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
4: activity_main_end.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.appcompat.widget.AppCompatImageView android:id="@+id/header_image" android:layout_width="0dp" android:layout_height="0dp" android:scaleType="centerCrop" app:layout_constraintBottom_toTopOf="@+id/desc_tv" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/background_logo" /> <TextView android:id="@+id/desc_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:paddingStart="24dp" android:paddingEnd="24dp" android:paddingBottom="32dp" android:text="@string/random_string" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:lineHeight="26dp" /> <TextView android:id="@+id/title_tv" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:padding="24dp" android:text="@string/test_title" android:textColor="@android:color/white" android:textSize="22sp" app:layout_constraintBottom_toBottomOf="@+id/header_image" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
5: activity_main_motion.xml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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="@layout/activity_main_end" app:constraintSetStart="@layout/activity_main_start"> <OnSwipe app:touchAnchorSide="top" app:dragDirection="dragUp" /> </Transition> </MotionScene> |
The activity_main_motion file will be in the res->xml directory, either you can create the file or it can be auto-generated by the Android studio.
In the activity_main_motion.xml file, we can provide various types of animations.
We can also use the constraint set to animate the layout for animation from start to end.
Final Result:
That’s it from my side for today, thanks for reading it until now.