Motion Layout: Creating Simple Recycler View Animation

In this tutorial, our goal is to create this project I’ve made recently:

What is MotionLayout?

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.

Read more: https://developer.android.com/training/constraint-layout/motionlayout

To know more about the concepts of MotionLayout here’s the good read: https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

Prerequisite

Basic Knowledge of:

• Android Development
• ConstraintLayout
• Kotlin

Getting Started

Step 1. Create a new Android project

1. Select Empty Activity
2. Name your app accordingly
3. Finish

Step 2. Implement dependency

1. Add this on your build.gradle (app level) dependencies.

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'

2. Sync Gradle Files

Step 3. Create the item’s layout

We need to achieve this layout using the ConstraintLayout , to do that we need to create a new layout resource file under res/layout and name it item_food .

Here’s the link for the images and icons: Food Buddy Resources

Step 4. Converting ConstraintLayout to MotionLayout

Note: Ignore the warnings in the ImageView for now. But if you’re too bothered, you can simply add the contentDescription in each of the ImageView’s attribute

1. In the screenshot above, select Design
2. Right-click the clMain then choose Convert to MotionLayout

Now the IDE will be updated to this to support the MotionLayout configuration

• If you checked your item_food.xml code, the parent layout is now converted into MotionLayout
• Also, there will be added xml folder under res folder which contains the item_food_scene.xmlfile

Step 5. Adding Animation to Image

1. Select the ivFood
2. Make sure to select the end in Motion Layout UI Editor
3. In the ivFood ImageView, select the end constraint then drag up to the end of the parent constraint layout
4. The image should be placed in the middle
5. In the Attributes, change the layout_height and layout_width to 300dp

Step 6. View the Animation

1. In the Motion Layout UI Editor
2. Click the top arrow that is connecting the start and end rectangle to view the Transition
3. Below, the editor will change into Transition
4. Press the Play button to start the animation

Step 7. Adding animation to CardView

1. Click the cardView in the Component Tree
2. Click the end rectangle in the Motion Layout UI Editor
3. Click the cardView in the Constraint Set
4. In the Attributes, find the Transforms category and expand it
5. Click the alpha attribute and set it to 0
6. This will create a fading animation

Step 8. Adding onClick Action

To trigger the animation we have to set the onClick action

1. In the Attributes, under OnClick add new field
2. Add targetId for the key then select the ivFood id for the value
3. Add new field
4. Add clickAction for the key then select toggle for the value

Final animation output:

Step 9. Add Recycler View to your activity_main.xml

Step 10. Create Model and Dummy Data

Step 11. Create Adapter and ViewHolder

• You can do it in a usual way using our FoodModel

Step 12. Populate List in MainActivity

Final Output:

Few notes

• If you check the item_food_scene.xml you will be able to see all the animations we configure.
• You can also manually create/edit your animations in the scene file

If you followed this tutorial until the end, thank you so much! I hope you learned something awesome. MotionLayout has more capabilities, and if you imagine, there can be endless possibilities. I am still learning, so if you have any suggestions or opinions, please let me know so I can improve my work. Thanks ✨