Reader Level:
TUTORIAL

Frame by Frame Animation in Android

By Chintan Rathod on December 26, 2011
Flip book concept is taken for this animation. Frames of images are added and at some interval of time, frames are changed.
  • 2
  • 0
  • 25034
Download Files:
 

I remember when I was a child, we have made drawings on papers which acted as animation. We draw numerous slides one by one and arrange them and flip them speedily. So that we realize that is going smoothly like animation. In cartoons also, this technique is used. We can see this in a flip book.

In this concept, we will make some slides called frames and give them individually duration for how long it will appear on the screen and that's it.

So, this tutorial will help you to learn how frame by frame animation works. It's very easy.

Step 1

Find out images which you want for animation. They should be in sequence so that we can realize it as flipping continuously. File type of images like GIF, PNG etc. After finding, copy them and place them by copy and paste in

"Your project" -> res -> drawable-mdpi -> paste images

Drawable has three categories

  1. hdpi-> high dots per inch
  2. ldpi->large dots per inch
  3. mdpi->medium dots per inch

Step 2

There are two methods to perform this animation. 1) By creating "BitmapDrawable" objects, 2) By creating "animation" xml file. We will see both method one by one.

  1. Do with "BitmapDrawable"

    Syntax:

    BitmapDrawable object=(BitmapDrawable) getResources().getDrawable(R.drawable.<image_name>);

    Example

    Suppose I have image named "sample.png" in "res.drawable" directory, then

    BitmapDrawable frame1=(BitmapDrawable)getResources().getDrawable(R.drawable.sample);

    AnimationDrawable animation = new AnimationDrawable();

    Now, we can add frames which we have created above as like you want.

    Syntax:

    AnimationDrawable.addFrame(BitmapDrawable,duration);

    Example

    animation.addFrame(frame1,1000);

    In this animation, while you start this animation, it will stop after last added frame. If you like to continue this animation, following method must be implemented.

    animation.setOneShot(false);

    Now, bind "ImageView" object of layout

    ImageView img=(ImageView)findViewById(R.id.imageView1);
    img.setBackgroundDrawable(animation);   

    animation.start();
    animation.stop();

    Description:

    • Duration is in milliseconds.
    • setBackgroundDrawable(animation) method will set background with animation and give control over animation.
    • start() method will start your animation and stop() will stop this animation.
       
  2. Do with "animatin.xml" file in animation directory

    First, right click "Your Project" -> new -> Android Xml File ->

    FramebyFrame.gif

    Now, write down following code in that file by removing existing codes.

    <?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/sample1" android:duration="50"/>
      <item android:drawable="@drawable/sample2" android:duration="50"/>
      <item android:drawable="@drawable/sample3" android:duration="50"/>
    </animation-list>

    In above code, I have added 3 frames with "android:drawable" attribute and duration in milliseconds.

    Now, bind "ImageView" object with layout and implement following methods.

    ImageView img=(ImageView)findViewById(R.id.imageView1);
    img.setImageBitmap(null);
    img.setBackgroundResource(R.anim.animation);

    Next, create object of "AnimatinDrawable" and give background to "AnimationDrawable" so that it can handle it.

    AnimationDrawable animation = (AnimationDrawable) img.getBackground();
    animation.start();
    animation.stop();

Using "BitmapDrawable"

Main.java

package com.animationapp;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
public class AnimationAppActvity extends Activity {
    /** Called when the activity is first created. */

    ImageView img;
    Button btnStart,btnStop;
    AnimationDrawable animation;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        int duration = 150;
        img = (ImageView)findViewById(R.id.imageView1);
       
        BitmapDrawable frame1 =
            (BitmapDrawable)getResources().getDrawable(R.drawable.d1);
        BitmapDrawable frame2 =
            (BitmapDrawable)getResources().getDrawable(R.drawable.d2);
        BitmapDrawable frame3 =
            (BitmapDrawable)getResources().getDrawable(R.drawable.d3);       

        animation = new AnimationDrawable();       
        animation.addFrame(frame1, duration);
        animation.addFrame(frame2, duration);
        animation.addFrame(frame3, duration);
       
        animation.setOneShot(false);
 
        img.setBackgroundDrawable(animation);
       
        btnStart = (Button)findViewById(R.id.btnStart);
        btnStop = (Button)findViewById(R.id.btnStop);
       
        btnStart.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                  // TODO Auto-generated method stub
                  animation.start();
            }
        });
       
        btnStop.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
             // TODO Auto-generated method stub
             animation.stop();
             }
        });
    }
} 

Layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
<ImageView
      android:layout_height="wrap_content"
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:minHeight="191px" android:minWidth="285px">
</ImageView>
<Button
      android:text="Start"
      android:id="@+id/btnStart"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
</Button>
<Button
      android:text="Stop"
      android:id="@+id/btnStop"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
</Button>
</LinearLayout> 

Using "animation.xml" file

package com.AnimApp;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView; 

public class AnimAppActivity extends Activity {
    /** Called when the activity is first created. */
     
      Button btnStart,btnStop;
      ImageView img;
      AnimationDrawable animation;
     
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        btnStart=(Button)findViewById(R.id.button1);
        btnStop=(Button)findViewById(R.id.button2);
       
        img=(ImageView)findViewById(R.id.imageView1);       
        img.setBackgroundResource(R.anim.animation);
        animation=(AnimationDrawable)img.getBackground();
       
        btnStart.setOnClickListener(new View.OnClickListener() {   
              @Override
              public void onClick(View v) {
                   // TODO Auto-generated method stub
                   animation.start();
              }
        });
     
        btnStop.setOnClickListener(new View.OnClickListener() {
        
            @Override
            public void onClick(View v) {
            // TODO Auto-generated method stub
            animation.stop();
            }
        });
    }
}

animation.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/d1" android:duration="50"/>
  <item android:drawable="@drawable/d2" android:duration="50"/>
  <item android:drawable="@drawable/d3" android:duration="50"/>
</animation-list>

Note:

Layout is same in both methods.

FramebyFrame1.gif

Summary

Frame by Frame animation is useful while you want it frame by frame with some interval.

Article Extensions
Contents added by vaibhav tekade on Nov 20, 2012
its really a good example, with proper steps..
Chintan Rathod

He completed his Master of Computer Application from Gujarat Technological University 2012. His area of Interests are Android and Java Technologies.

COMMENT USING

Trending up