Try the Compose way  
Jetpack Compose is the recommended UI toolkit for Android. Learn how to use Animations in Compose.  
[Animate vector drawables →](https://developer.android.com/develop/ui/compose/animation/vectors)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)  
![](https://developer.android.com/static/training/animation/videos/drawable-animation.gif) **Figure 1.** An animated drawable.


In some situations, images need to be animated. This is useful if you want to display
a custom loading animation composed of several images or if you want an icon to morph after a user's
action. Android provides two options for animating drawables.


The first option is to use an [`AnimationDrawable`](https://developer.android.com/develop/ui/views/animations/drawable-animation#AnimationDrawable). This
lets you specify several static
[drawable files](https://developer.android.com/guide/topics/graphics/2d-graphics) that display one at a time to
create an animation. The second option is to use an
[`AnimatedVectorDrawable`](https://developer.android.com/develop/ui/views/animations/drawable-animation#AnimVector), which lets you animate the properties
of a [vector drawable](https://developer.android.com/guide/topics/graphics/vector-drawable-resources).

## Use AnimationDrawable


One way to create an animation is to load a sequence of drawable resources, like a roll of film.
The [`AnimationDrawable` class](https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable)
is the basis for these kinds of drawable animations.

You can define the frames of an animation in your code by using the `AnimationDrawable`
class API, but it's easier to define them with a single XML file that lists the frames that
make up the animation. The XML file for this kind of animation belongs in the `res/drawable/`
directory of your Android project. In this case, the instructions give the order and duration for
each frame in the animation.

The XML file consists of an `<animation-list>` element as the root node and a
series of child `<item>` nodes that each define a frame---a drawable resource
and its duration. Here's an example XML file for a `Drawable` animation:  

```xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
```

This animation runs for three frames. Setting the `android:oneshot`
attribute of the list to <var translate="no">true</var> makes it cycle once and then stop and hold
on the last frame. If you set `android:oneshot` to <var translate="no">false</var>,
the animation loops.

If you save this XML as `rocket_thrust.xml` in the `res/drawable/`
directory of the project, you can add it as the background image to a `View` and then
call `start()` to make it play. Here's an example of an activity in which the animation is added to an
[ImageView](https://developer.android.com/reference/android/widget/ImageView) and then animated
when the screen is touched:  

### Kotlin

```kotlin
private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}
```

### Java

```java
AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}
```


It's important to note that the `start()` method called on the
`AnimationDrawable` can't be called during the `onCreate()` method of your
`Activity`, because the `AnimationDrawable` is not yet fully attached to the
window. To play the animation immediately, without requiring interaction, you can call it from the
[onStart()](https://developer.android.com/reference/android/app/Activity#onStart())
method in your `Activity`, which is called when Android makes the view visible on screen.


For more information on the XML syntax and available tags and attributes, see [Animation resources](https://developer.android.com/guide/topics/resources/animation-resource).

## Use AnimatedVectorDrawable

A [vector drawable](https://developer.android.com/guide/topics/graphics/vector-drawable-resources)
is a type of drawable that is scalable without getting pixelated or blurry. The
[`AnimatedVectorDrawable`
class](https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable)---and [`AnimatedVectorDrawableCompat`](https://developer.android.com/reference/androidx/vectordrawable/graphics/drawable/AnimatedVectorDrawableCompat) for backward compatibility---lets you animate the
properties of a vector drawable, such as rotating it or changing the path data to morph it into a
different image.


You normally define animated vector drawables in three XML files:

- A vector drawable with the `<vector>` element in `res/drawable/`.
- An animated vector drawable with the `<animated-vector>` element in `res/drawable/`.
- One or more object animators with the `<objectAnimator>` element in `res/animator/`.


Animated vector drawables can animate the attributes of the `<group>` and
`<path>` elements. The `<group>` element defines a set of
paths or subgroups, and the `<path>` element defines paths to be drawn.


When you define a vector drawable that you want to animate, use the `android:name`
attribute to assign a unique name to groups and paths, so you can refer to them from your animator
definitions. For example:

res/drawable/vectordrawable.xml  

```xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>
```


The animated vector drawable definition refers to the groups and paths in the vector drawable
by their names:

res/drawable/animatorvectordrawable.xml  

```xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>
```


The animation definitions represent
[ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) or
[AnimatorSet](https://developer.android.com/reference/android/animation/AnimatorSet) objects. The
first animator in this example rotates the target group 360 degrees:

res/animator/rotation.xml  

```xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>
```


The second animator in this example morphs the vector drawable's path from one shape to
another. The paths must be compatible for morphing: they must have the same number of commands
and the same number of parameters for each command.

res/animator/path_morph.xml  

```xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>
```


Here is the resulting `AnimatedVectorDrawable`:  
**Figure 2.** An `AnimatedVectorDrawable`.

### Animated Vector Drawable (AVD) preview


The Animated Vector Drawable tool in Android Studio lets you preview animated
drawable resources. This tool helps you preview `<animation-list>`,
`<animated-vector>`, and `<animated-selector>` resources in
Android Studio and makes it easier to refine your custom animations.  
![User previewing and playing an animation inside Android Studio](https://developer.android.com/static/studio/images/releases/avd-preview.gif) **Figure 3.** The Animated Vector Drawable tool in Android Studio.

<br />


For more information, see the API reference for
[AnimatedVectorDrawable](https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable).