Java Tips Weblog

  • Blog Stats

    • 2,189,673 hits
  • Categories

  • Archives

  • Advertisements

Animated Icon

Posted by Rob Camick on June 21, 2009

I’m sure everybody has seen or used animated gifs on a webpage. As far as I know an animated gif is created using an image editor and the images and animation information is contained within a single gif file. Have you ever thought about dynamically creating an animated gif? Well, I don’t know how to do that, but I might have an approach that will work just as well.

How about an animated icon? To create an animated icon all we need to do create an Icon to hold multiple icons. Then we need to create animation such that the icons are displayed in a defined order at a defined time interval. The AnimatedIcon class was created to provide these two pieces of functionality.

When creating the AnimatedIcon you can specify two parameters to configure the animation:

  • delay – the interval of time between the switching of each icon
  • cycles – a cycle is completed after showing each icon once. The cycles can be set to a specific value or to continuous. In the former case animation will stop automatically after the specified number of cycles is completed. In the latter case the animation continues until stopped by the program.

In addition you can manually control the animation using:

  • start – the animation is started from the beginning. This method has no effect when the animation is currently running.
  • stop – the animation is stopped and the initial icon is redisplayed
  • pause – the animation is paused at the current icon
  • restart – the animation is restarted from where it was paused. This method has no effect when the animation is currently running.

The JDK API provides an Icon implementation for images, namely ImageIcon. You could easily create animation from individual images. However, there is no reason that you can’t implement your own Icon interface to add functionality. As a starting point you may want to consider using a TextIcon, RotatedIcon or CompoundIcon to come up with some creative animation. Here are a couple of suggestions.

1) Code for rotating an icon (ie. the image is rotated at a different angle each time) would be something like:

JLabel label1 = new JLabel();
AnimatedIcon icon1 = new AnimatedIcon(label1, 250, 3);
ImageIcon duke = new ImageIcon( "???" );
icon1.addIcon( duke );

for (int angle = 45; angle < 360; angle += 45)
    icon1.addIcon( new RotatedIcon(duke, angle) );

label1.setIcon( icon1 );

2) Code for creating a text message icon (ie. the number of dots keeps changing) would be something like:

JLabel label2 = new JLabel("Processing ");
label2.setHorizontalTextPosition( JLabel.LEADING );
AnimatedIcon icon2 = new AnimatedIcon( label2 );
icon2.setAlignmentX( AnimatedIcon.LEFT );
icon2.addIcon( new TextIcon(label2, ".") );
icon2.addIcon( new TextIcon(label2, "..") );
icon2.addIcon( new TextIcon(label2, "...") );
icon2.addIcon( new TextIcon(label2, "....") );
icon2.addIcon( new TextIcon(label2, ".....") );
label2.setIcon( icon2 );

Thanks to Darryl for creating the animated gif below. It gives you an idea of what the animation would look like using the code from above. To see the other two icons in animation you will need to run the Web start demo.


The default animation displays the icons in sequence. I’ve also include a simple example of how you might customize this animation. The CircularAnimatedIcon class displays all the icons in sequence and then displays them in reverse order to complete the cycle. Try experimenting with other custom sequences. Maybe a random sequence?

The above examples are shown using a JLabel. Many other components, JButton, JTabbedPane, JCheckBox, JRadioButton, JMenu etc, also support icons so you can experiment with an AnimatedIcon for those components as well. Hopefully, with a little creativity and the building blocks presented here you can create some interesting effects. Have fun trying.

Try The Demo

Launch – Using Java™ Web Start (JRE 6 required)

Get The Code

See Also

Compound Icon
Text Icon
Rotated Icon


4 Responses to “Animated Icon”

  1. Mark Frye said

    Nicely done. It appears that the following need to be added to code 2 snippet above:
    Will you also post the source for your demo.
    Thank you

    • Prajin said

      Source is there, just right there.
      Look at the heading saying “Get the Code”.
      click there and get the code.

  2. Mark Frye said

    The code listed there was appreciated. However I was addressing the code for the combined “Animated Icon and Circular Animated Icon” demo. Thanks again, for your contributions.

  3. Anonymous said

    Hello, is it possible to do the same thing but use Image instead of Icon? AnimatedImage extends BufferedImage – something like that?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: