Frame by Frame Animation in Android

Introduction

 
I remember when I was a child, we have made drawings on papers that 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 flipbook.
 
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 that you want for animation. They should be in sequence so that we can realize it as flipping continuously. The 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 methods one by one.
  1. Do with "BitmapDrawable"
     
    Syntax:
    1. BitmapDrawable object=(BitmapDrawable) getResources().getDrawable(R.drawable.<image_name>); 
    Example
     
    Suppose I have an image named "sample.png" in "res.drawable" directory, then
    1. BitmapDrawable frame1=(BitmapDrawable)getResources().getDrawable(R.drawable.sample);  
    2.   
    3. AnimationDrawable animation = new AnimationDrawable(); 
    Now, we can add frames that we have created above as you want.
     
    Syntax:
    1. AnimationDrawable.addFrame(BitmapDrawable,duration); 
    Example
    1. animation.addFrame(frame1,1000); 
    In this animation, while you start this animation, it will stop after the last added frame. If you like to continue this animation, the following method mustbe implemented.
    1. animation.setOneShot(false);  
    2.   
    3. Now, bind "ImageView" object of the layout  
    4. ImageView img=(ImageView)findViewById(R.id.imageView1);  
    5. img.setBackgroundDrawable(animation);     
    6. animation.start();  
    7. animation.stop(); 
    Description:
     
    • Duration is in milliseconds.
    • setBackgroundDrawable(animation) method will set background with animationand give control over animation.
    • start() method will start your animation and stop() will stop thisanimation.
        
  2. Do with "animatin.xml" file inanimation directory
     
    First, right click "Your Project" -> new -> Android Xml File ->
     
    FramebyFrame.gif
     
    Now, write down the following code in that file by removing existing codes.
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <animation-list  
    3.   xmlns:android=http://schemas.android.com/apk/res/android  
    4.   android:oneshot="false">  
    5.   <item android:drawable="@drawable/sample1" android:duration="50"/>  
    6.   <item android:drawable="@drawable/sample2" android:duration="50"/>  
    7.   <item android:drawable="@drawable/sample3" android:duration="50"/>  
    8. </animation-list>  
    In the above code, I have added 3 frames with "android:drawable" attribute andduration in milliseconds.
     
    Now, bind "ImageView" object with the layout and implement the following methods.
    1. ImageView img=(ImageView)findViewById(R.id.imageView1);  
    2. img.setImageBitmap(null);  
    3. img.setBackgroundResource(R.anim.animation);  
    4. Next, create object of "AnimatinDrawable" and give background to "AnimationDrawable" so that it can handle it.  
    5. AnimationDrawable animation = (AnimationDrawable) img.getBackground();  
    6. animation.start();  
    7. animation.stop(); 
Using "BitmapDrawable"
 
Main.java
  1.  package com.animationapp;  
  2. import android.app.Activity;  
  3. import android.graphics.drawable.AnimationDrawable;  
  4. import android.graphics.drawable.BitmapDrawable;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.Button;  
  8. import android.widget.ImageView;  
  9.    
  10. public class AnimationAppActvity extends Activity {  
  11.     /** Called when the activity is first created. */  
  12.     ImageView img;  
  13.     Button btnStart,btnStop;  
  14.     AnimationDrawable animation;  
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);  
  19.    
  20.         int duration = 150;  
  21.         img = (ImageView)findViewById(R.id.imageView1);  
  22.          
  23.         BitmapDrawable frame1 =  
  24.             (BitmapDrawable)getResources().getDrawable(R.drawable.d1);  
  25.         BitmapDrawable frame2 =  
  26.             (BitmapDrawable)getResources().getDrawable(R.drawable.d2);  
  27.         BitmapDrawable frame3 =  
  28.             (BitmapDrawable)getResources().getDrawable(R.drawable.d3);         
  29.         animation = new AnimationDrawable();         
  30.         animation.addFrame(frame1, duration);  
  31.         animation.addFrame(frame2, duration);  
  32.         animation.addFrame(frame3, duration);  
  33.          
  34.         animation.setOneShot(false);  
  35.    
  36.         img.setBackgroundDrawable(animation);  
  37.          
  38.         btnStart = (Button)findViewById(R.id.btnStart);  
  39.         btnStop = (Button)findViewById(R.id.btnStop);  
  40.          
  41.         btnStart.setOnClickListener(new View.OnClickListener() {  
  42.              @Override  
  43.              public void onClick(View v) {  
  44.                   // TODO Auto-generated method stub  
  45.                   animation.start();  
  46.             }  
  47.         });  
  48.          
  49.         btnStop.setOnClickListener(new View.OnClickListener() {  
  50.              @Override  
  51.              public void onClick(View v) {  
  52.              // TODO Auto-generated method stub  
  53.              animation.stop();  
  54.              }  
  55.         });  
  56.     }  
  57. }  
Layout file
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <TextView   
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="wrap_content"  
  10.     android:text="@string/hello"  
  11.     />  
  12. <ImageView  
  13.       android:layout_height="wrap_content"  
  14.       android:id="@+id/imageView1"  
  15.       android:layout_width="wrap_content"  
  16.       android:minHeight="191px" android:minWidth="285px">  
  17. </ImageView>  
  18. <Button  
  19.       android:text="Start"  
  20.       android:id="@+id/btnStart"  
  21.       android:layout_width="wrap_content"  
  22.       android:layout_height="wrap_content">  
  23. </Button>  
  24. <Button  
  25.       android:text="Stop"  
  26.       android:id="@+id/btnStop"  
  27.       android:layout_width="wrap_content"  
  28.       android:layout_height="wrap_content">  
  29. </Button>  
  30. </LinearLayout>  
Using "animation.xml" file
  1.  package com.AnimApp;  
  2. import android.app.Activity;  
  3. import android.graphics.drawable.AnimationDrawable;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.widget.Button;  
  7. import android.widget.ImageView;   
  8. public class AnimAppActivity extends Activity {  
  9.     /** Called when the activity is first created. */  
  10.        
  11.       Button btnStart,btnStop;  
  12.       ImageView img;  
  13.       AnimationDrawable animation;  
  14.        
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);  
  19.          
  20.         btnStart=(Button)findViewById(R.id.button1);  
  21.         btnStop=(Button)findViewById(R.id.button2);  
  22.          
  23.         img=(ImageView)findViewById(R.id.imageView1);         
  24.         img.setBackgroundResource(R.anim.animation);  
  25.         animation=(AnimationDrawable)img.getBackground();  
  26.          
  27.         btnStart.setOnClickListener(new View.OnClickListener() {     
  28.               @Override  
  29.               public void onClick(View v) {  
  30.                    // TODO Auto-generated method stub  
  31.                    animation.start();  
  32.               }  
  33.         });  
  34.        
  35.         btnStop.setOnClickListener(new View.OnClickListener() {  
  36.           
  37.             @Override  
  38.             public void onClick(View v) {  
  39.             // TODO Auto-generated method stub  
  40.             animation.stop();  
  41.             }  
  42.         });  
  43.     }  
  44.  
animation.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list  
  3.   xmlns:android="http://schemas.android.com/apk/res/android"  
  4.   android:oneshot="false">  
  5.   <item android:drawable="@drawable/d1" android:duration="50"/>  
  6.   <item android:drawable="@drawable/d2" android:duration="50"/>  
  7.   <item android:drawable="@drawable/d3" android:duration="50"/>  
  8. </animation-list> 
Note:
 
Layout is the same in both methods.
 
FramebyFrame1.gif
 

Summary

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