Animation in Android

We know that animation is the technique for making a movie using a series of drawings, computer graphics, or photographs of objects (such as puppets or models) that are slightly different from one another and that, when viewed quickly one after another, creates the appearance of movement.

Today we make a simple animation as in the following:



In the preceding picture we are moving a series of photos frame-by-frame that create an illusion of moving an object.

Now we move toward the code section of this project.

In the design section we use an Imageview. In this ImageView we will show our image. We also use two buttons. One to start the animation and the other to stop the animation. 

The following is the XML code of our project:

  1. <LinearLayout  
  2.     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. android:background="#E6E6E6">  
  7.     <ImageView android:layout_height="wrap_content"  
  8. android:layout_width="wrap_content" android:id="@+id/imageAnimation"  
  9. android:adjustViewBounds="true" />  
  10.     <Button  
  11. android:id="@+id/btnStart"  
  12. android:layout_width="wrap_content"  
  13. android:layout_height="wrap_content"  
  14. android:text="Start Animation" />  
  15.     <Button  
  16. android:id="@+id/btnStop"  
  17. android:layout_width="wrap_content"  
  18. android:layout_height="wrap_content"  
  19. android:text="Stop Animation" />  
  20. </LinearLayout>  
After using the preceding XML code the design of the project is:

Design of projec

In drawable-mdpi folder we put a number of images. Each image contains a specific position of the ball with respect to the other image. We provide a serial number for each image according to their position in the animation.

image

We use an animation.xml file. This file contains an animation-list. In this animation list we provide the path of each image in the form of a list item. We also provide the time duration for each image so that specific time image will be visible and then the next image will be visible. We can decrease the value of the time duration to increase the animation speed or increase the value of the time duration to decrease the animation speed.

The following is the 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/frame0" android:duration="50" />  
  6.     <item android:drawable="@drawable/frame1" android:duration="50" />  
  7.     <item android:drawable="@drawable/frame2" android:duration="50" />  
  8.     <item android:drawable="@drawable/frame3" android:duration="50" />  
  9.     <item android:drawable="@drawable/frame4" android:duration="50" />  
  10.     <item android:drawable="@drawable/frame5" android:duration="50" />  
  11.     <item android:drawable="@drawable/frame6" android:duration="50" />  
  12.     <item android:drawable="@drawable/frame7" android:duration="50" />  
  13.     <item android:drawable="@drawable/frame8" android:duration="50" />  
  14.     <item android:drawable="@drawable/frame9" android:duration="50" />  
  15.     <item android:drawable="@drawable/frame10" android:duration="50" />  
  16.     <item android:drawable="@drawable/frame11" android:duration="50" />  
  17.     <item android:drawable="@drawable/frame12" android:duration="50" />  
  18.     <item android:drawable="@drawable/frame13" android:duration="50" />  
  19.     <item android:drawable="@drawable/frame14" android:duration="50" />  
  20.     <item android:drawable="@drawable/frame15" android:duration="50" />  
  21.     <item android:drawable="@drawable/frame16" android:duration="50" />  
  22.     <item android:drawable="@drawable/frame17" android:duration="50" />  
  23.     <item android:drawable="@drawable/frame18" android:duration="50" />  
  24.     <item android:drawable="@drawable/frame19" android:duration="50" />  
  25.     <item android:drawable="@drawable/frame20" android:duration="50" />  
  26.     <item android:drawable="@drawable/frame21" android:duration="50" />  
  27.     <item android:drawable="@drawable/frame22" android:duration="50" />  
  28.     <item android:drawable="@drawable/frame23" android:duration="50" />  
  29.     <item android:drawable="@drawable/frame24" android:duration="50" />  
  30.     <item android:drawable="@drawable/frame25" android:duration="50" />  
  31.     <item android:drawable="@drawable/frame26" android:duration="50" />  
  32.     <item android:drawable="@drawable/frame27" android:duration="50" />  
  33.     <item android:drawable="@drawable/frame28" android:duration="50" />  
  34.     <item android:drawable="@drawable/frame29" android:duration="50" />  
  35.     <item android:drawable="@drawable/frame30" android:duration="50" />  
  36.     <item android:drawable="@drawable/frame31" android:duration="50" />  
  37.     <item android:drawable="@drawable/frame32" android:duration="50" />  
  38.     <item android:drawable="@drawable/frame33" android:duration="50" />  
  39.     <item android:drawable="@drawable/frame34" android:duration="50" />  
  40.     <item android:drawable="@drawable/frame35" android:duration="50" />  
  41. </animation-list>  
Now I will explain the source code (animation.java) for this project. 

The following is the source code of the project:
  1. package com.appsolut.example.animation;  
  2.   
  3. import android.app.Activity;  
  4. import android.graphics.drawable.AnimationDrawable;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.Button;  
  8. import android.widget.ImageView;  
  9.   
  10. public class Animation extends Activity {  
  11.   
  12.     /** 
  13.      * Reference to the ImageView which will display the animation. 
  14.      */  
  15.     ImageView animation;  
  16.     Button Start;  
  17.     Button Stop;  
  18.   
  19.     @Override  
  20.     public void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.main);  
  23.   
  24.         Start = (Button) findViewById(R.id.btnStart);  
  25.         Stop = (Button) findViewById(R.id.btnStop);  
  26.   
  27.         animation = (ImageView) findViewById(R.id.imageAnimation);  
  28.   
  29.         animation.setBackgroundResource(R.drawable.animation); // the frame-by-frame animation defined as a xml file within the drawable folder  
  30.         final AnimationDrawable frameAnimation = (AnimationDrawable) animation.getBackground();  
  31.         /* 
  32.          * NOTE: It's not possible to start the animation during the onCreate. 
  33.          * 
  34.          */  
  35.   
  36.         Start.setOnClickListener(new View.OnClickListener() {  
  37.   
  38.             @Override  
  39.             public void onClick(View arg0) {  
  40.                 // TODO Auto-generated method stub  
  41.                 frameAnimation.start(); //Start the Animation  
  42.             }  
  43.         });  
  44.   
  45.   
  46.         Stop.setOnClickListener(new View.OnClickListener() {  
  47.   
  48.             @Override  
  49.             public void onClick(View arg0) {  
  50.                 // TODO Auto-generated method stub  
  51.                 frameAnimation.stop(); // Stop the Animation  
  52.             }  
  53.         });  
  54.     }  
  55.   
  56. }  
Explanation 

    Code Section 1

    1. ImageView animation;  
    2. Button Start;  
    3. Button Stop;  
    4. Start=(Button)findViewById(R.id.btnStart);  
    5. Stop=(Button)findViewById(R.id.btnStop);  
    6. animation = (ImageView)findViewById(R.id.imageAnimation);  
    In the preceding code we create an Imageview object and in that object we provide the reference of the Imageview that we use in this project. We also create two objects of the Button class and we provide the reference of the "Start Animation" and "Stop Animation" buttons in these two objects.

    Code Section 2

    animation.setBackgroundResource(R.drawable.animation);
    final AnimationDrawable frameAnimation = (AnimationDrawable) animation.getBackground();;

    In the preceding code first we provide the resource of the animation-list to the animation object (object of Imageview). This resource contains a number of images.

    In the second line we create an object of the AnimationDrawable class. This object creates frame-by-frame animations, defined by a series of Drawable objects, that can be used as a View object's background. The simplest way to create a frame-by-frame animation is to define the animation in an XML file, placed in the res/drawable/ folder, and set it as the background to a View object.

    Code Section 3
    1. Start.setOnClickListener(new View.OnClickListener() {  
    2.   
    3.     @Override  
    4.     public void onClick(View arg0) {  
    5.         // TODO Auto-generated method stub  
    6.         frameAnimation.start(); //Start the Animation  
    7.     }  
    8. });  
    In the preceding code we set an OnClick event for the "Start Animation" button. When we click on the "Start Animation" button the animation will start.

    Code Section 4

    1. Stop.setOnClickListener(new View.OnClickListener() {  
    2.   
    3.     @Override  
    4.     public void onClick(View arg0) {  
    5.         // TODO Auto-generated method stub  
    6.         frameAnimation.stop(); // Stop the Animation  
    7.     }  
    8. });  
    In the preceding code we set an OnClick event for the "Stop Animation" button. When we click on the "Stop Animation" button the animation will stop. 

Today we learned how make an animation in some simple steps.

Up Next
    Ebook Download
    View all
    Learn
    View all