Wednesday, January 18, 2012

Create frame animation with AnimationDrawable





Before we start coding for our frame animation, we have to prepare some .png graph for our frames, named android_1.png ~ android_7.png. Copy all graphs to /res/drawable folder.























Create a file /res/anim/anim_android.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/android_1"
android:duration="100"/>
<item
android:drawable="@drawable/android_2"
android:duration="100"/>
<item
android:drawable="@drawable/android_3"
android:duration="100"/>
<item
android:drawable="@drawable/android_4"
android:duration="100"/>
<item
android:drawable="@drawable/android_5"
android:duration="100"/>
<item
android:drawable="@drawable/android_6"
android:duration="100"/>
<item
android:drawable="@drawable/android_7"
android:duration="100"/>
</animation-list>


Modify main.xml, add a ImageView with android:src="@anim/anim_android".
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<ImageView
android:id="@+id/myanimation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@anim/anim_android"
/>

</LinearLayout>


Modify our activity:
package com.exercise.AndroidAnimation;

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

public class AndroidAnimationActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ImageView myAnimation = (ImageView)findViewById(R.id.myanimation);
final AnimationDrawable myAnimationDrawable
= (AnimationDrawable)myAnimation.getDrawable();

myAnimation.post(
new Runnable(){

  @Override
  public void run() {
   myAnimationDrawable.start();
  }
});
}
}


Download the files.

Next:
- Start and Stop frame animation with AnimationDrawable
Handle end of animation for AnimationDrawable

Related:
- Create AnimationDrawable using Java code

4 comments:

Aliyah said...

What do you mean "Modify our Activity" ? I have 4 "activities" already, and so do I add the code to the activity I already have? For example, I have Main.java ..do I extend Main.java with those lines of code?

Im a little confused..

Erik said...

Hello cz,

In my exercise, it's one activity only - AndroidAnimationActivity.java.

Anyway, you can download the file to check it.

thx.

WASIM said...

nice post ...
but what if i want to start other activity after certain time.
Main activity after splash activity .

Erik said...

hello WASIM,

Please read:
- Handle end of animation for AnimationDrawable
- Intent & Bundle