Animation with the Motion Layout in Android
As a developer, we know that the animation is pretty hard to manage and if we don't handle it properly it will hang the UI. Sometimes it will twice to thrice time than the UI design. The proper animation makes your app more attractive. To create the animation very easy and attractive way the android introduces a new Motion Layout.
The key feature of this layout is you do not have to write a single line of code to perform the animation. Is it Great? Like me, you also want to add animation in the project but due to timeline or more code we avoiding to add it. So from now, you can add the animation with less and easily maintain code.
MotionLayout is a layout class that extends from ConstraintLayout. MotionLayout has all the features of ConstraintLayout. Motion layout is providing the functionality to animate the view on interactive animations.
I know we have talked a lot about this new layout and you want to try it. Let's check it with a simple example first. In this example, I will show how to bind your MotionLayout file with MotionScene with simple Onswipe animation.
Setting up the environment First, you have to set up dependencies:-
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3'
After successfully synced the project we have to define our view. So we are going to create XML file like below.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
MotionLayout is a layout class that extends from ConstraintLayout. MotionLayout has all the features of ConstraintLayout. Motion layout is providing the functionality to animate the view on interactive animations.
I know we have talked a lot about this new layout and you want to try it. Let's check it with a simple example first. In this example, I will show how to bind your MotionLayout file with MotionScene with simple Onswipe animation.
Setting up the environment First, you have to set up dependencies:-
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3'
After successfully synced the project we have to define our view. So we are going to create XML file like below.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout>
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="0dp"
android:layout_height="140dp"
android:scaleType="centerCrop"
android:id="@+id/imageViewAvatar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
If you using Constraint layout than you just need change the parent layout to MotionLayout. The motion layout have all the attribute of constraint layout so you don't have to redesign the UI again. Time Save !
To perform the animation on the view we have to create MotionScene file in the XML directory.
So next step is to create XML directory under the res folder and create a MotionScene file for the above layout.
The motion layout file have all the details that how your animation is being performed in the UI. You can define the initial position and other necessary information in this file. This file define's the real logic about how the animation has being performed.
In our example, I have just change the height of the top image view when user drags the second image-view.
activity_main_motion_scene.xml
<?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="1000">
<OnSwipe
app:touchAnchorId="@+id/imageView"
app:touchAnchorSide="top"
app:dragDirection="dragUp" />
</Transition>
<ConstraintSet android:id="@+id/start">
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint android:id="@id/imageViewAvatar"
android:layout_height="40dp"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
</Constraint>
</ConstraintSet>
</MotionScene>
As in the above example, we are doing the animation on the Onswipe event. We have created two different ConstraintSet objects which define the behavior(motion) of the animation. In this, we have to define different attribute to make the proper motion event.
<Transition/> is the base element of motion. We define the constraintSetStart and constraintSetEnd which holds the references of the start and end of the animation. ConstraintSet has the Constraint which holds all your attributes, which help the motion layout to make the correct motion. You can also create your custom attribute to make the animation as per your need.
Finally, You have to bind your layout with the animation file. To do that you have to use the app:layoutDescription tag. So for that, you have to add the below line of code into your activity_main.xml file.
Add the below line in your MotionLayout. <androidx.constraintlayout.motion.widget.MotionLayout
app:layoutDescription="@xml/activity_main_motion_scene"/>
That's it, now you run the project and see the animation without any coding in your Java or Kotlin file.
As in the above example, we are doing the animation on the Onswipe event. We have created two different ConstraintSet objects which define the behavior(motion) of the animation. In this, we have to define different attribute to make the proper motion event.
<Transition/> is the base element of motion. We define the constraintSetStart and constraintSetEnd which holds the references of the start and end of the animation. ConstraintSet has the Constraint which holds all your attributes, which help the motion layout to make the correct motion. You can also create your custom attribute to make the animation as per your need.
Finally, You have to bind your layout with the animation file. To do that you have to use the app:layoutDescription tag. So for that, you have to add the below line of code into your activity_main.xml file.
Add the below line in your MotionLayout. <androidx.constraintlayout.motion.widget.MotionLayout
app:layoutDescription="@xml/activity_main_motion_scene"/>
That's it, now you run the project and see the animation without any coding in your Java or Kotlin file.
Likewise, you can see the amazing tutorials from google's sample project :
Source: https://github.com/googlesamples/android-ConstraintLayoutExamples
Source: https://github.com/googlesamples/android-ConstraintLayoutExamples
Comments
Post a Comment