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: –
- First, prepare a set of images and properly name them according to the sequence.
- Put all the images in res/drawable folder under the project.
- 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(); } }