Quick Search Animation Using MotionLayout

I was exploring uplabs and found this beautiful animation,and decide to make using MotionLayout animation, with No code, only XML.

Quick Search Animation

I will explain step by step, anyone who knows any other better method to implement MotionLayout animations, please comment and let me know, i will be very thankful to you.

Create motion scene under the xml folder e.g. scene_quick_search.xml

Create motion scene under the xml folder

Create start view in the activity_main.xml, It will be very helpful to create start view of animation in the activity_main.xml you can always look at the design.

If you are satisfy with initial view of animation copy all the element and paste into the scene_quick_search.xml -> start ConstraintSet.

Now design your end animation view, this is how my end animation will look

activity_main.xml, with End animation view

Repeat above step ,If it’s look perfect you can copy all the element and paste into the scene_quick_search.xml -> end ConstraintSet. (Replace all view with Constraint) And This is final MotionScene

Don’t forget to app:layoutDescription in MotionLayout

<androidx.constraintlayout.motion.widget.MotionLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_quick_search">

Full Working Source code -> click here to download

If you learned something from this,please don’t forget to clap.

Happy Coding, Cheers!!