In a recent survey of Android users, 90 percent of those who were asked said that they were very happy with the Android platform except for the fact that their phone did not contain an animation of a dancing stick man.
Right now, we are going to make this killer app, using a stick figure prepared by the legendary stick figure artist Alexandro Del Shaw.
1.
Create a new Android project with the following settings: Project name: FunkyStickMan
Build Target: Android3.0
Application name: FunkyStickMan
Package name: com.packt.animation.funky
Create Activity: FunkyActivity
2.
Now, let's get some Drawables to work with. Drawable is a generic interface for anything on Android that is used for drawing graphics to the screen. In this case we will be using PNG images.Copy the res/drawable-*/ directories from the code bundle for this chapter.
You'll find a ZIP file called tutorial_images_1. Unzip it somewhere local to copy it to your new project.
In Eclipse, right-click on the res/ folder and select Import…
Pick the option to import by File System, then click Next
Navigate to the 5283_examples directory
Import the Drawables to the res/drawable-hdpi, res/drawable-mdpi, and res/drawable-ldpi folders in your project.
3.
Create the folder anim/ inside the res/ folder.4.
In the anim/ folder, create a new XML file called stickman.xml.5.
Create the root XML node in the file, so that it looks like the following:<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
</animation-list>
This is the standard root node for a frame animation. The android:oneshot attribute says whether to stop playing the animation after its first iteration. If false, it loops back to the beginning and plays indefinitely. We want the little fellow to keep dancing, so we choose false.
6.
Take a look at the res/drawable-hdpi directory and observe the numbered animation frames: stickman_frame_01.png
stickman_frame_02.png
(In fact, the res/drawable-mdpi and res/drawable-ldpi folders contain the same images in different resolutions.)
The android:drawables are obviously the images in the res/drawable-*
directories. The android:duration attribute is simply the number of milliseconds that each <item> will be shown before the animation moves on to the next
<item>.
There! You have finished your animation!
8.
Now for the final task, to display it to the user. Open up res/layout/main.xml and change the XML, so that it points to our new animation rather than the boring old "Hello Android!" text.android:id="@+id/stickman"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@anim/stickman"
/>
9.
At this point, build and run your animation. If you've typed everything in as described it, you will see a stick figure, but he will not be animated.You have made your animation, and now it is time for you to get Android to play it, when the application loads.
10.
Navigate your way to the Activity class in src/com/packt/animation/funky/FunkyStickMan.java. We're going to add some code to it.
I'll highlight the code that you need to add and break it down, so that we can look at it one piece at a time.
11.
Firstly, let's add the classes we're going to be working with. I'll describe them briefly here. You will see how they are used shortly.package com.packt.animation.funky;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.widget.ImageView;
import android.os.Bundle;
AnimationDrawable is Android's Java representation of the animation-list that we created in step 3.
ImageView will be used solely so that we can access the AnimationDrawable stored within the ImageView in main.xml.
The next step will be to retrieve the AnimationDrawable that we added in the main.xml layout. We will access it through the onCreate() method in FunkyActivity, so that we start the animation as soon as the application
is loaded.
public class FunkyActivity extends Activity { /** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ImageView animImage = (ImageView) findViewById(R.id.stickman);
final AnimationDrawable animDrawable = (AnimationDrawable) animImage.getDrawable();
The previous code should look familiar if you have done any serious work with views before. Firstly, the content view, which is the main view that gets displayed on the screen, is added by setContentView. We pass in the resource ID that relates to the main.xml file we've just edited, so we know that it will contain the graphics we just added.
FindViewById gets the container ImageView. From there we call
getDrawable() to get the actual animation. We will assign it to a final object called animDrawable, because we're going to need it in an anonymous Runnable in just a second.
12.
Sorry to interrupt, the source code for onCreate continues as follows:animImage.post(
13.
And here is where we actually start the animation. The call to animDrawable.start() is where we start the animation running.
Why did we not just call the animDrawable.start() method from the onCreate() method? You must make the animDrawable.start() call from inside a method that will be called from the GUI thread. In this example, we use a .post(Runnabler) method to do exactly that.
14.
Let's build and run the new activity again.Before, the stick man was not moving at all, but now he should be dancing. Watch the little fellow go!
What just happened?
Here we made a purely graphical application based around a single animation, with very little programming needed. The Android XML resource system took care of all the hard work for us.