MotionLayout is a new class of ConstraintLayout for building animations which is added in the dependency version 2.0 in ConstraintLayout.
|
1 |
implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1' |
Note: MotionLayout is available as a support library that you can use on Android systems starting with API level 18 (JellyBean MR2).
MotionLayout links to and requires a MotionScene file. The file contains one top level tag “LayoutDescription”
Let’s start by implementing it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" <strong>app:layoutDescription="@xml/step1"</strong>> <ImageView android:id="@+id/red_star" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_star_outline" android:tint="?colorSecondary" android:contentDescription="@string/star" android:layout_margin="30dp"/> </androidx.constraintlayout.motion.widget.MotionLayout> |
Here you can see a tag “layoutDescription” where I have mentioned my xml file in which the Animation is defined.
Now, In step1.xml file
|
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 |
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end" app:duration="2000"> <!-- MotionLayout will handle clicks on @id/red_star to "toggle" the animation between the start and end --> <OnClick app:targetId="@id/red_star" app:clickAction="toggle"/> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/red_star" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/red_star" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </ConstraintSet> </MotionScene> |
Here, we have defined targetId of the view on which the animation has to be performed and its clickAction which in this case is toggle. And in the ConstraintSet, the transition of the view. Similarly, we can create different transitions.
In Transition block, we can create different animations according to our requirement.
References:
Be the first to comment.