Tutorial details

Android beginner tutorial: Part 95 - Frame Animation | App Code for Sale | Preview

Android beginner tutorial: Part 95 - Frame Animation | Android Tutorial

Frame Animation

Overview PAGE TOP

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 frameanim drawable using setBackgroundResource() method. Then declare an AnimationDrawable instance, set its value to the background of our image, which was set to the frameanim 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!

Reference PAGE TOP

http://kirill-poletaev.blogspot.it/2013/02/android-beginner-tutorial-part-95-frame.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.