How to add Animated Vector Drawable Animation?

How to Add Animated Vector Drawable Animation?

Animated Vector Drawables are a powerful way to add engaging animations to your Android apps using vector graphics. They offer several advantages over traditional animations, including smaller file sizes, better scalability, and greater control over the animation process. In this article, we’ll explore how to integrate Animated Vector Drawable animations into your Android projects.

Creating an Animated Vector Drawable

Before we dive into adding the animation, let’s create an Animated Vector Drawable resource:

1. Creating the XML file:

• Open your Android Studio project and navigate to the drawable folder.
• Create a new XML file and name it (e.g., animated_rotate.xml).
• Paste the following code into the XML file:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android">
  <vector
    android:name="vector"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
      android:name="arrow"
      android:pathData="M12,2L12,22"
      android:strokeColor="#FF0000"
      android:strokeWidth="2dp"
      android:strokeLineCap="round" />
  </vector>

  <target android:name="arrow">
    <aapt:attr name="android:rotation">
      <anim:rotate
        android:duration="1000"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:fromDegrees="0"
        android:toDegrees="360" />
    </aapt:attr>
  </target>

</animated-vector>

Explanation:

• <animated-vector>: The root element defining the animated vector drawable.
• <vector>: The vector graphic itself, containing paths, groups, and other drawable elements.
• <target>: Specifies the element that will be animated. In this case, it’s the “arrow” path.
• <aapt:attr>: Defines the animation attribute we want to modify (e.g., rotation, translation, scale).
• <anim:rotate>: The specific animation type applied to the target element.

Using the Animated Vector Drawable

Once the Animated Vector Drawable is created, we can use it in our layouts or code:

1. In XML Layout:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/animated_rotate" />

2. In Java Code:

ImageView imageView = findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.animated_rotate);

Animation Types and Attributes

Animated Vector Drawables support various animation types with customizable attributes. Here’s a table outlining some common animation types and their associated attributes:

Conclusion

Animated Vector Drawables offer a streamlined approach to creating captivating animations within your Android apps. By understanding their structure and available animation types, you can effortlessly incorporate visually appealing animations into your user interfaces. This results in engaging user experiences and enhanced visual appeal for your apps.