Android Animations - Tutorial

Lars Vogel

Version 0.4

Copyright © 2010 Lars Vogel

10.03.2011

Revision History
Revision 0.1	05.01.2011	Lars Vogel
Created
Revision 0.2 - 0.4	08.02.2011 - 10.03.2011	Lars Vogel
bug fixes and enhancements

Android Animations

This tutorial describes how to use Animations in Android. The tutorial is based on Eclipse 3.6, Java 1.6 and Android 2.3 (Gingerbread).

---

Table of Contents

1. Android Animations

1.1. Overview

1.2. Tweened Animations

1.3. Android Basics

2. Example

3. Thank you

4. Questions and Discussion

5. Links and Literature

5.1. Source Code

5.2. Android Resources

5.3. vogella Resources

1. Android Animations

1.1. Overview

Android supports two types of animations: Frame-by-frame animations and Tweened Animations. Frame-by-frame animations shows different drawables in a View. Tweened animations are applied to Views and transform them in size, position or opacity. Both animations are limited to the original size of the view.

1.2. Tweened Animations

Tweened animations are descripted via resource files and are relatively unexpensive operations. You can use AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation.
You can group animations in "AnimationSet" in which you define the start time, duration and offsets of each animation.
You apply the animation to a view via view.startAnimation() passing the AnimationSet as a parameter. Per default a AnimationSet will run once, unless you use setRepeatModel() and setRepeastCount().
Register an "AnimationListener" to react to the animation. This listener is notified when an animation starts or ends.
Animations can be defined via XMl resource files in the directory "res/anim" or via code. You can load the resource file via AnimationUtils.loadAnimiation(this,R.anim.Animation).

1.3. Android Basics

The following assumes that you have already basic knowledge in Android development . Please check the Android development tutorial to learn the basics.

2. Example

We will create a simple example which rotates a TextView. We will also add an "AnimationListener" which listeners to the animations events. Create a new Android project "de.vogella.android.animation" with the activity "AnimationExample". Change "main.xml" to the following.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Animate" android:onClick="startAnimation"></Button>
<TextView android:id="@+id/textview" android:layout_width="fill_parent"
 android:layout_height="wrap_content" android:text="@string/hello" />
</LinearLayout>

  

Create a new resource file "myanimation.xml" of type animation.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="true">
 <rotate android:fromDegrees="0" android:toDegrees="360"
  android:duration="4000" android:pivotX="50%" android:pivotY="50%"
  android:startOffset="0">
 </rotate>
</set>


  

Change your activity to the following.

package de.vogella.android.animation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

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

 }

 public void startAnimation(View view) {
  Animation animation = AnimationUtils.loadAnimation(this,
    R.anim.myanimation);
  animation.setAnimationListener(this);
  View animatedView = findViewById(R.id.textview);

  animatedView.startAnimation(animation);

 }

 @Override
 public void onAnimationStart(Animation animation) {
  Toast.makeText(this, "Animation started", Toast.LENGTH_SHORT).show();
 }

 @Override
 public void onAnimationEnd(Animation animation) {
  Toast.makeText(this, "Animation ended", Toast.LENGTH_SHORT).show();
 }

 @Override
 public void onAnimationRepeat(Animation animation) {
  Toast.makeText(this, "Animation rep", Toast.LENGTH_SHORT).show();
 }
}
  

If you run this example and press the button, the animation should start.

3. Thank you