Home
|
Android
|
Android XML Animation Resources and AnimationListener Tutorial

Android XML Animation Resources and AnimationListener Tutorial

Android, Tutorial

This post describes how to use Android XML Animation and in more details how we can use animation in Android and how we can implements an AnimationListener. In particular, this tutorial describes the tween animation. Tween animation can be divided in four groups:

  • translate – Move a View along X and Y axis
  • rotate – Rotate a View
  • scale – Scale a View
  • fade – Fade effect on a view

Even if it is quite trivial to create an animation, i found a bit confusing how set animation parameter. One thing we have to know before digging into the details is in Android animations can be described using XML. To do it, we have to create a folder under res directory called anim. I won’t dig into the parameter details (you can read them in API Doc) rather i prefer to show a bit more how to animate a View considering some aspects about X and Y axis.

android xml animation

In general, we can say that there three different way to measure and indicate how a View can move in Android XML Animation:
  • absolute value (ranging from –100 to 100)
  • relative to the view (ranging from –100% to 100%)
  • relative to its parent (ranging from –100%p to 100%p)
Let’s suppose, for simplicity, we want to animate a TextView so we can create a layout like this one:
[xml]<RelativeLayout 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" >

<TextView
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="S/A"
tools:context=".MainActivity" />

</RelativeLayout>[/xml]

This TextView is placed at upper left side of the screen. Let’s suppose we want to move it to the right, to do it we create a file called move_to_right_anim.xml like this one:
[xml]<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="100%p"
android:duration="800"
android:interpolator="@android:anim/accelerate_interpolator">
</translate>[/xml]
In this example of Android XML Animation, we simply tell to the Android OS that X as to move from 0% to 100%p (so it means to the parent right side) and that this animation has to last for 800ms. Now what’s the interpolator? Interpolator defines how to movement takes place. In this case we say that the View has to move faster while it reaches the right side.

android_animation_translate

Let’s suppose we want our TextView Falls from the top to the middle of the screen with a bouncing effect. Well this is very simply we need just to modify the xml animation file. Let’s call it fall_bounce_anim.xml. In this case we want that the animation takes place along Y axis moving from 0%p to 50%p while along X axis we want to place the TextView in the middle of the screen so 50%p.

android_animation_bounce
So the XML file is:

[xml]<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="50%p"
android:toXDelta="50%p"
android:fromYDelta="0%p"
android:toYDelta="50%p"
android:duration="1000"
android:interpolator="@android:anim/bounce_interpolator">
</translate>[/xml]

In this case the duration is 1000ms so 1 sec.
Let’s suppose now that our TextView is placed in the middle of the screen and we want to move it up. In this case the “origin” of our animations is the middle of the screen
android_animation_traslate_up

then the XML file looks like:

[xml]<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%p"
android:toXDelta="0%p"
android:fromYDelta="0%p"
android:toYDelta="-50%p"
android:duration="1000"
android:interpolator="@android:anim/bounce_interpolator">
</translate>[/xml]

In other words, we have to move up of –50%p.

Another interesting animation type is rotation. In this case we have to specify the rotation angle expressed in degrees. In this case two parameter pivotX and pivotY specify the coordinates of the rotation point. If we want, for example, that the rotation takes place around the middle point of our view we have simply to specify the pivotX and pivotY equals to 50%. XML is like this:
[xml]<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/cycle_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>[/xml]
You can try other kinds of animation, like fading and so son and other type of interpolators.

 

How to start the Android XML Animation

Once we have defined our animation using the XML we have to “apply” this animation to the view and then starts it. The first thing we need to do is loading the animation. This can be done using an helper class called AnimationUtil. For example, to load the rotate animation we need to write
Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
where this is the context. The we simply start the activity using the method startActivity passing as parameter the animation loaded (anim).
[java]@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final TextView tv = (TextView) findViewById(R.id.logo);
//Animation anim = AnimationUtils.loadAnimation(this, R.anim.move_to_right_anim);
//Animation anim = AnimationUtils.loadAnimation(this, R.anim.fall_bounce_anim);
final Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
tv.startAnimation(anim);

……
}[/java]

Animation listener

One interesting aspect of animation is the capability to add a listener, AnimationListener. Implementing this listener we can get notification when animation starts ( onAnimationStart(Animation animation) ) , repeat ( onAnimationRepeat(Animation animation) ) and ends ( onAnimationEnd(Animation animation) ). In this method we can implements our logic.

 

For example let’s suppose we want animate a TextView when an user clicks on it and then starts another Activity. The first thing we need is to catch the click event, this is trivial:
[java]tv.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// We implement our logic

}
});[/java]

Remember that tv is the TextView reference retrieved by findViewById() method. Now in the method we simply starts the animation and then we implement the AnimationListener like that:

[java]tv.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
tv.startAnimation(anim);
anim.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationEnd(Animation animation) {
// We start the Activity

}
});

}
});
[/java]

In the onAnimationEnd method that is called at the end of our animation we start our new Activity.

You might be interested on:
Android ListView animation
Tweet Reddit Share Pin it
Tags: