Android Frame Animation Tutorial/Example

In Frame Animation, several images are framed one by one to show Animation to a human eye.So, for frame animation, we will need the set of images that needs to be framed one by one to show the animation in android.

Frame are animated over image view and each frame duration is specified to show the animation in android.In Android Animations can also be played with XML and programmatically.

Note: – In Frame I will use AnimationDrawable class for frame animation and it loads all images into memory at once so there are chances of OOM(Out of  Memory Exception) so, be careful about the size of images and always try to use less number of images and lower size images to avoid Out of Memory Exception.

So, Lets’s Start: –

  1. First, prepare a set of images and properly name them according to the sequence.
  2. Put all the images in res/drawable folder under the project.
  3. Create an XML file under res/drawable folder to specify the sequence and duration of each frame and name the file as frame_animation_images.xml

frame_animation_images.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/zero"
        android:duration="100"/>
    <!--<item-->
        <!--android:drawable="@drawable/one"-->
        <!--android:duration="100"/>-->
    <item
        android:drawable="@drawable/two"
        android:duration="100"/>
    <item
        android:drawable="@drawable/three"
        android:duration="100"/>
    <item
        android:drawable="@drawable/four"
        android:duration="100"/>
    <item
        android:drawable="@drawable/five"
        android:duration="100"/>
    <item
        android:drawable="@drawable/six"
        android:duration="100"/>
    <item
        android:drawable="@drawable/seven"
        android:duration="100"/>
    <item
        android:drawable="@drawable/eight"
        android:duration="100"/>
    <item
        android:drawable="@drawable/nine"
        android:duration="100"/>
    <item
        android:drawable="@drawable/ten"
        android:duration="100"/>
    <item
        android:drawable="@drawable/eleven"
        android:duration="100"/>
    <item
        android:drawable="@drawable/twelve"
        android:duration="100"/>
</animation-list>

Duration of a frame is specified in milliseconds i.e 1 sec=1000 milliseconds.

android:oneshot=” true” means the animation will be played once if set to false animation will play repeatedly.

Now next step is to set this frame_animation_images.xml as background to Image view this can be done in Two ways: –

in XML

<ImageView
       android:id="@+id/imageview_animation"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:background="@drawable/frame_animation_images"
       />

or Programmatically.

myAnimationImageView = (ImageView) findViewById(R.id.imageview_animation);
       myAnimationImageView.setBackground(getDrawable(R.drawable.frame_animation_images));

Create a layout file Containing Image view for frame animation.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:id="@+id/mainlayout"
    android:layout_height="fill_parent"
     >
    <ImageView
        android:id="@+id/imageview_animation"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/frame_animation_images"
        />
</RelativeLayout>

Now Create an Activity class to code for Animation and play it

MainActivity.java

package com.coderpassion.frameanimationsample;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

/**
 * Created by Coderzpassion on 2/8/16.
 */
public class SplashPro extends Activity {


    private ImageView myAnimation;
    private AnimationDrawable myAnimationDrawable;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreen);
     // casting the imageview
        myAnimation = (ImageView) findViewById(R.id.imageview_animation);

// setting animationlist as background to the imageview       myAnimation.setBackground(getDrawable(R.drawable.frame_animation_images));

//casting the Animation Drawable
        myAnimationDrawable
                = (AnimationDrawable)myAnimation.getBackground();

        //Calculate the total duration of the animation
        int duration = 0;
        for(int i = 0; i < myAnimationDrawable.getNumberOfFrames(); i++){
            duration += myAnimationDrawable.getDuration(i);
        }

      //start the animation
         myAnimationDrawable.start();

      //stop the animation
         myAnimationDrawable.stop();
      
}
}