HEJP's Blog

Using animations in your Android applications can help create an interesting and engaging experience for your users. They can be used in games and applications in a number of ways either as a visual treat or as a method to convey information. Fortunately Android has an animation framework that allows you to easily translate, rotate, scale and alter the alpha of (or a combination) a View. Common transitions like fade in/out or slide in from off screen are examples of animations the framework can produce. Animations and Interpolators The process of animating a View makes use of two classes the Animation and Interpolator classes. The Animation class describes various aspects of the animation such as the transformation (changes in position, alpha, etc) and the duration of the animation. The Interpolator class describes the rate of change of the animation, for example a ScaleAnimation with an AccelerateIterpolator results in a View that scales slowly at first and speeds up until the end of the animation. There are a number of different interpolators the most basic LinearInterpolator to more complex ones such as AccelerateInterpolator, AccelerateDecelerateInterpolter and OvershootInterpolator. Adding Animation to a View Here is res/layout/main.xml, it contains a button called ‘butt’ that is centred in the screen.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/butt" android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true" android:text="Shake!"/>

</RelativeLayout>

Now we define our animation, res/anim/exampe_anim.xml , which is going to slide the button in from the bottom of the screen to the centre of the screen scaling from 0.5 to 1 as it travels all in 1.5 seconds. The p in 50%p means parent, since the Button is a primary child of the RelativeLayout this means 50% of the screen height.

<?xml version="1.0" encoding="utf-8"?>

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/decelerate_interpolator" android:shareInterpolator="true">

		<translate android:fromYDelta="50%p" android:toYDelta="0" android:duration="1500" />

		<scale android:fromYScale="0.5" android:toYScale="1" android:fromXScale="0.5"
		android:toXScale="1" android:duration="1500" />

</set>

To start the animation use AnimationUtils.loadAnimation(context, resID) to load the animation and the startAnimation(animation) method of the View class.

butt.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), R.anim.example_anim));

Creating a Custom Animation To create a custom animation you need to extend the Animation class and over ride its applyTransformation(interpolatedTime, transformation) method. The iterpolatedTime argument is a float from 0 to 1 and represents the progression of the animation. The transformation argument is a Transformation that holds the alpha of the View and a Matrix that is applied to the View. To give you an example we’ll create a custom animation that shakes the View in this case a Button a ‘fun’ way indicating to the user that there is an error in some input data.

public class ShakeAnimation extends Animation{

	public ShakeAnimation(){
		// set duration to half a second
		setDuration(500);
	}

	public void applyTransformation(float interpolatedTime, Transformation t){
		// set the matrix to I
		t.getMatrix().reset();
		// and translate randomly by max magnitude of 3px each way
		t.getMatrix().postTranslate((float)Math.random()*6-3, (float)Math.random()*6-3);
	}
}

Modifying the Matrix of the Transformation you can translate, rotate, scale and even skew not that you’d really want to since that would look a little rubbish.

public class Main extends Activity implements OnClickListener {

	Button butt;
	ShakeAnimation shake;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		butt = (Button) this.findViewById(R.id.butt);
		butt.setOnClickListener(this);

		shake = new ShakeAnimation();
	}

	@Override
	public void onClick(View v) {
		butt.startAnimation(shake);
	}
}

There we have it when the button is clicked it shakes. Here’s a little video showing the slide in and shake. Fairly complex behaviour for such a small amount of code.