Motion Layout: Creating Simple Recycler View Animation

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

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

Basic Knowledge of:

  • Android Development
  • ConstraintLayout
  • Kotlin
  1. Select Empty Activity
  2. Name your app accordingly
  3. Finish
  1. Add this on your build.gradle (app level) dependencies.
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'

2. Sync Gradle Files

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

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
  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
  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
  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

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
  • You can do it in a usual way using our FoodModel

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 ✨

Android Developer | Newbie