MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Implement Animation in Android

In this article we will see how to create a simple animation using 6 images of Sonic the Hedgehog. He will do the classic waiting and looking at his watch pose which he used to do if you left him doing nothing for too long.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Animation

Animation is basically the quick display of a number of pictures which represent movement. A common example of this would be a cartoon animation or motion pictures. I thought it would be interesting to introduce you to animation as it can be used in many ways in apps. You could make your own little cartoon or animated figure etc.

There are many applications on Google Play that use animation. Check out https://play.google.com/store/search?q=animation&c=apps . I’m sure you’ll find an app that tickles your fancy. Here’s one called StickDraw: https://play.google.com/store/apps/details?id=com.bingzer.android.stickdraw&feature=search_result. Also there are some cracked screen apps that use animations to portray the cracking of your screen. See https://play.google.com/store/apps/details?id=net.gnomemade.apps.crackedscreen&feature=search_result for an example. Ok now onto my tutorial, what am I going to do in this tutorial? Let’s find out;

In this tutorial

For this tutorial I will show you how to create a simple animation using 6 images of Sonic the Hedgehog. He will do the classic waiting and looking at his watch pose which he used to do if you left him doing nothing for too long. Any Sega fans out there? I’m a fan so hence the choice of images. I will have a TextView at the top, a stop/start button and also an exit button. Note: I am using build target 2.3.3 for running this application

Sonic animation images

Figure 1: Sonic animation images.

Creating the Application

Step 1:

Create a new Android Project in Eclipse and name it Application5. Name the main activity ApplicationActivity5.

Project Structure

Figure 2: Project Structure.

Step 2:

As seen from the project structure above we create an animation.xml file. Right click on layout in the res folder. Select New then select File then type animation.xml. Also I have placed 6 sonic images into the drawable -hdpi folder: sonic1.png, sonic2.png, sonic3.png, sonic4.png, sonic5.png and sonic6.png. If you’d like to use the same images as me, you can use print screen to copy figure 1 (above) into paint then cut the images of sonic and save them as .png files into the drawable.hdpi folder. (Note for beginners: If you have trouble finding your folders to save these images, an easy way to put the images in that folder is to copy them from where you have them saved then right click on the drawable-hdpi folder in the Eclipse folder structure as seen above and select paste.)

Step 3:

Copy and paste this code into your string.xml file:

Listing 1: string.xml file code

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

    <string name="title"><b><u>Animation</u></b></string>
    <string name="app_name">Application5</string>
    <string name="start">Start</string>
    <string name="stop">Stop</string>
    <string name="animation_image">Animation Image Goes here</string>

</resources>

Step4:

Copy and paste this code into your main.xml file:

Listing 2: main.xml file code

<?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:id="@+id/space1"
        android:layout_width="wrap_content"
        android:layout_height="20dp" />
    

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:gravity="center"
        android:textSize="24sp" />
    
    <TextView
        android:id="@+id/space1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="" />
    
    <Button 
       android:id="@+id/start_stop"
       android:layout_width="100dp"
    	android:layout_height="wrap_content" 
    	android:text="@string/start"
    	android:layout_gravity="center"/>
    
    <TextView
        android:id="@+id/space1"
        android:layout_width="wrap_content"
        android:layout_height="40dp" />
    
	<ImageView
		android:id="@+id/animationImage"
		android:layout_width="100dp"
		android:layout_height="121dp"
		android:contentDescription="@string/animation_image"
		android:layout_gravity="center" />
	
	<TextView
        android:id="@+id/space1"
        android:layout_width="wrap_content"
        android:layout_height="40dp" />

	<Button
	    android:id="@+id/exit"
	    android:layout_width="100dp"
	    android:layout_height="wrap_content"
	    android:text="Exit"
	    android:layout_gravity="center" />

</LinearLayout>

You’ll end up with this:

Graphical Layout of main.xml

Figure 3: Graphical Layout of main.xml

Notice in ImageView android:contentDescription="@string/animation_image". See http://developer.android.com/training/accessibility/accessible-app.html for an explanation. Also notice I reference the string.xml file for button text also in this application android:text="@string/start".

Step 5:

Copy and paste this code into your animation.xml file:

Listing 3: animation.xml file

<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@drawable/sonic1"
android:duration="100" />
<item
android:drawable="@drawable/sonic2"
android:duration="100" />
<item
android:drawable="@drawable/sonic3"
android:duration="100" />
<item
android:drawable="@drawable/sonic4"
android:duration="100" />
<item
android:drawable="@drawable/sonic5"
android:duration="100" />
<item
android:drawable="@drawable/sonic6"
android:duration="100" />

</animation-list>

Here is a reference to all the images we will use and the duration time they will be displayed for e.g.

 <item
android:drawable="@drawable/sonic2"
android:duration="100" />

The second sonic image will be displayed for 100 milliseconds i.e. a tenth of a second (1/10th of a second). Feel free to change the duration, experiment with it, see how it works etc. Note this xml won’t display a graphical layout in eclipse. Also note: android:oneshot="false"> This is Boolean. Set to "true" if you want to perform the animation once; "false" to loop the animation. See Animation Resource for more on Animation.

Step 6:

Copy and paste this code into your Application5Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 4: Application5Activity code

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class Application5Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
    final Button start_stop = (Button) findViewById(R.id.start_stop);
        
	start_stop.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // Perform action on click
            	ImageView imgView = (ImageView) findViewById(R.id.animationImage);
        		imgView.setBackgroundResource(R.layout.animation);

AnimationDrawable frameAnimation = (AnimationDrawable) imgView.getBackground();

        		if (frameAnimation.isRunning()) {
        			frameAnimation.stop();
        			start_stop.setText("Start");
        		} else {
        			frameAnimation.start();
        			start_stop.setText("Stop");
        		}
            }
        });
	
	 final Button exit = (Button) findViewById(R.id.exit);
     
     exit.setOnClickListener(new View.OnClickListener() {
         public void onClick(View v) {
             // Perform action on click
         	
         	finish();
         }
     });
    }
}

As we can see from the code, the ImageView is set to R.layout.animation when the button is clicked. When the frameAnimation is running, if we hit the start_stop button it will cause the animation to stop and the text to change to Start. If the animation is not running and we hit the start_stop button it starts the animation and sets the text on the button to Stop. Also we implement the exit button and exit the application using finish();

Animation Application

Figure 4: Animation Application

Conclusion

After following this tutorial you should now be able to experiment around with animations in android. The possibilities are endless with just a bit of imagination. There are many cool things you can implement into apps with the use of animation, for instance check out the ClayFrames Lite app on Google play. It’s pretty cool and shows what can be done using animation. Also see this video where a guy tests it out. Also for any budding biology enthusiasts, doctors or nurses, have a look at https://play.google.com/store/apps/details?id=com.focusmedica.essentail.atlas&feature=search_result. It’s an Anatomy Atlas which is animated. I was pretty impressed. It gives you an idea what can be actually done with animation in apps.

In my next tutorials we shall look at more cool things to do in android. I hope you learned something from this tutorial and enjoyed this tutorial. If so, just give it a like. I’ll see you all next time.

Steve



Recently finished a Mobile technology course concentrating on Java and Android Development. Am currently working for a company developing Android applications.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login