Wednesday, February 27, 2013

Android beginner tutorial: Part 95 - Frame Animation

In this tutorial we will learn about Frame Animation.

A Frame Animation is a classic type of animation where the animation consists of multiple still images displayed in order.

To make a Frame animation in Android, you need to create an xml file with animation-list root node, containing item nodes, which have 2 attributes - drawable and duration. The drawable attribute is set to a drawable resource and represents the image to display, the duration value is the time in milliseconds that this item is displayed for.

Let's create such xml file now. Go to res/drawable/ directory and add a new xml file. Call it frame_anim.xml. Here are the contents:

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

Now go to activity_main.xml layout file of your project. Add 2 buttons - labeled Start and Stop, as well as an ImageView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button android:text="Start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_start"
            />
        <Button android:text="Stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_stop"
            />
    </LinearLayout>
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

Go to the MainActivity.java class now. In the onCreate() function, declare an ImageView instance, which is a reference to the ImageView we have in our layout. Set its background to the frame_anim drawable using setBackgroundResource() method. Then declare an AnimationDrawable instance, set its value to the background of our image, which was set to the frame_anim drawable. Add click listeners for the two buttons, use the animation's start() and stop() methods to start and stop animation:

package com.example.codeforfoodtest_two;

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 MainActivity extends Activity{


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImageView image = (ImageView)findViewById(R.id.image);
image.setBackgroundResource(R.drawable.frame_anim);
final AnimationDrawable animation = (AnimationDrawable)image.getBackground();

final Button btnStart = (Button)findViewById(R.id.btn_start);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.start();
}
});

final Button btnStop = (Button)findViewById(R.id.btn_stop);
btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.stop();
}
});

}
}

Easy as that!

Test your application and you'll see a frame animation that can be started and stopped using the provided buttons.

Thanks for reading!

No comments:

Post a Comment