Android Frame Animation Example – Drawable Animation Guide

Frame animation in Android lets you create animated sequences by displaying a series of images (frames) one after another. Unlike property animations, frame animations are based on frame-by-frame drawable sequencing, useful for sprite-style effects, game visuals, and expressive UI transitions.

This updated guide on javatechig.com explains how to create frame animations using XML and Kotlin/Java, with best practices for performance and lifecycle-safe control.

What Is Frame Animation in Android?

Frame animation (also called drawable animation) displays a sequence of drawable images in rapid succession.

Key characteristics:

• Uses a list of drawable resources
• Defined via XML or code
• Best for sprite-style sequences
• Not ideal for complex motion transitions

For more advanced motion effects, prefer property animations (ObjectAnimator, MotionLayout).

How Frame Animation Works

Android frame animation uses an AnimationDrawable object. You define an animation list in XML with your frames, durations, and sequence order. When played back, Android renders the frames one after another.

Step 1 – Create Frame Animation XML List

Create an XML file in res/drawable (e.g., frame_anim.xml):

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item android:drawable="@drawable/frame1" android:duration="80"/>
    <item android:drawable="@drawable/frame2" android:duration="80"/>
    <item android:drawable="@drawable/frame3" android:duration="80"/>
    <!-- Add more frames as needed -->
</animation-list>

Attribute explanation:

• android:oneshot="false" — animation loops continuously
• android:duration — milliseconds per frame

Step 2 – Add Frame Animation to Layout

In your layout XML:

<ImageView
    android:id="@+id/frameImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/frame_anim"/>

This binds your animation list to an ImageView.

Step 3 – Control Animation in Code

Kotlin Example

val imageView = findViewById<ImageView>(R.id.frameImageView)
val frameAnimation = imageView.drawable as AnimationDrawable

frameAnimation.start() // start animation
frameAnimation.stop()  // stop animation

Java Example

ImageView imageView = findViewById(R.id.frameImageView);
AnimationDrawable frameAnimation = (AnimationDrawable) imageView.getDrawable();

frameAnimation.start(); // start animation
frameAnimation.stop();  // stop animation

Optimize Frame Animation

Use Fewer Frames

Too many frames increase memory consumption and slow devices.

Use Appropriate Sizes

Match frame sizes to display size to avoid scaling overhead.

Decode Efficiently

Use BitmapFactory.Options when loading large frames.

Lifecycle-Aware Control

Start and stop animations based on lifecycle to conserve resources:

Kotlin

override fun onStart() {
    super.onStart()
    frameAnimation.start()
}

override fun onStop() {
    frameAnimation.stop()
    super.onStop()
}

Java

@Override
protected void onStart() {
    super.onStart();
    frameAnimation.start();
}

@Override
protected void onStop() {
    frameAnimation.stop();
    super.onStop();
}

Frame vs Property Animation

Use frame animation for simple sprite effects; prefer property animations for complex UI motion.

Common Issues & Fixes

No Animation Visible

Cause: android:oneshot="true"
Fix: Set false for looping or re-start manually.

Large Memory Footprint

Cause: Many large frames
Fix: Reduce frame count, scale bitmaps

Animation Stops Abruptly

Cause: Lifecycle interruptions
Fix: Control start/stop in lifecycle methods

Best Practices (2026 Updated)

• Only use frame animation for small sprite sequences
• Use vector animations (AnimatedVectorDrawable) for UI transitions
• Reuse frames where possible
• Profile memory when using many images
• Prefer property animations for responsive UIs