Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close
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.
Follow these simple steps to start using MotionLayout in your project.
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' } |
|
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> |
|
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 48 |
<?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> |
|
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> |
|
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 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 type of animations.
We can also use the constraint set to animate the layout for animation from start to end.
. . . . . . . . . .
That’s it from my side for today, thanks for reading it until now.
Be the first to comment.