If you read my TechRepublic App Builder posts on a regular basis, you know that my 13-year-old son and I have been working on coding a game for Android devices. A few weeks ago we added some cool sound effects to jazz things up. This past weekend, we decided some nifty animation sequences were called for in the game.

I’ve poked around at the animation framework in the Android SDK before. In the past I’ve always just needed a single transition, or in the worst case a single animation that I could loop. This time, I was hoping for something a bit more flexible. I wanted to chain several animations together, without pulling out my hair trying to get the timing right. As it turns out, the smart folks at Google anticipated exactly this scenario and gave us developers the <set> tag, which allows us to define several animations in a single XML file and then treat them in code like a single entity.

The short program that follows shows how to incorporate an animation set into your next app. Follow along with the tutorial or pull down the entire project here and import it directly into Eclipse.

1. Create a new Android project in Eclipse. Target platform 1.6 or higher. Rename the startup activity to Main.java.

2. In your /layout directory create a new folder called /xml. Create a new XML file called faded_rectangle.xml. We will use Android’s built-in shape library to draw a simple rectangle with a nice gradient and rounded corners.

faded_rectangle.xml
<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"


android:shape="rectangle">


<gradient android:startColor="#99CCFF"


android:endColor="#003366"


android:angle="270"/>


<corners android:bottomRightRadius="15dp"


android:bottomLeftRadius="15dp"


android:topLeftRadius="15dp"


android:topRightRadius="15dp"/>

</shape>

3. We need to define the animations. To keep it simple we will zoom out, rotate, zoom back in, and use our <set> tag to link the transitions. Add another file (called animation_fx.xml) to your /xml folder.

animation_fx.xml

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


<set


xmlns:android="http://schemas.android.com/apk/res/android">


<scale


android:fromXScale="1.0"


 android:fromYScale="1.0"


 android:toXScale=".75"


 android:toYScale=".75"


 android:duration="1500"/>


<rotate


android:fromDegrees="0"


 android:toDegrees="360"


 android:duration="1500"


 android:pivotX="50%"


 android:pivotY="50%" />


<scale


android:fromXScale=".75"


 android:fromYScale=".75"


 android:toXScale="1"


 android:toYScale="1"


 android:duration="1500"/>

</set>

4. We will move to the /layout folder and define our activity layout. It’s a pretty standard linear layout, except that we’ve set the background attribute of one of the text view elements to point at our faded rectangle shape.

main.xml

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


 android:layout_width="fill_parent"


 android:layout_height="fill_parent"


 android:orientation="vertical" >


<TextView


android:layout_width="fill_parent"


 android:layout_height="wrap_content"


 android:text="Animation Demo"


android:paddingBottom="100dip"/>


<TextView


android:layout_width="wrap_content"


 android:layout_height="wrap_content"


 android:layout_gravity="center"


 android:clickable="true"


 android:id="@+id/touch_here"


 android:background="@xml/faded_rectangle"


 android:padding="12dip"


 android:textStyle="bold"


 android:textColor="#000000"


 android:text="Touch Here!"/>

</LinearLayout>

5. The final step is to add the on click handler to the Main.java file in our /src folder. We hook the click in the on create override, and then invoke the animation sequence in the callback.

 Main.java
package com.authorwjf.anichain;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
public class Main extends Activity implements OnClickListener{

/** Called when the activity is first created. */


@Override

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.main);


TextView tv = (TextView)findViewById(R.id.touch_here);

tv.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v.getId()==R.id.touch_here) {
Animation a = AnimationUtils.loadAnimation(this, R.xml.animation_fx);

a.reset();


TextView tv = (TextView) v;


tv.clearAnimation();


tv.startAnimation(a);


}


}

}

You can run the demo (Figure A) on your emulator, though the animations are much more impressive on an actual device.
Figure A

In my opinion, the Android platform has a number of rough edges, so I’m always pleased when I see something with real polish. The animation set is one of those items in the SDK that stands out. It works and works well.