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.
- 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)
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]
<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]
<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
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.
<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]
How to start the Android XML Animation
Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
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
@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.
Android ListView animation