JButton example - how to create a JButton rollover effect

Problem

You want to implement a nice mouse rollover effect on the buttons (JButton instances) in your Java Swing application. This Java button rollover effect makes your application feel more "alive" and interactive.

You can see what this button rollover effect looks like in the following two images. First, here's what a Java button (JButton) looks like normally:

Next, here's what the same JButton looks like when I roll over it with the mouse:

Solution

A few days ago a friend of mine saw the text editor that I've written for my own purposes (where those two images come from), and asked me how to implement this Java button rollover effect in a Swing application yesterday. It had been a while since I added this icon rollover effect to the application, so I dug through some old Java code to figure out how I did it.

The basic recipe I used, including the RolloverIcon class shown below (and the RolloverComposite class it references) comes from this IBM DeveloperWorks article. (They really did all the hard work and deserve the credit for the "heavy lifting" here; I'm really just showing how to use their rollover icon classes here.)

First, declare your JButton and ImageIcon references early in your Java code, like this:

// declare this early
JButton fileSaveButton = new JButton();
ImageIcon fileSaveImage;

Later in your program, have a few lines of code like this to configure your JButton:

// set up the jbutton
fileSaveButton.setToolTipText("Save File");
fileSaveButton.setIcon(fileSaveImage);
fileSaveButton.setRolloverEnabled(true);

// create an instance of the RolloverIcon class when calling setRolloverIcon
fileSaveButton.setRolloverIcon(new RolloverIcon(fileSaveImage));

Note that in that last line of code where I call setRolloverIcon, I'm creating a new instance of a RolloverIcon object, passing it the same ImageIcon I used when I called setIcon.

And finally, a really important piece of this recipe is to have a class like this RolloverIcon class, which does the rollover work for you:

import java.awt.*;
import javax.swing.*;

/**
 * this class was created by two ibm authors.
 * @see http://www.ibm.com/developerworks/web/library/us-j2d/
 */
public class RolloverIcon implements Icon
{
  protected Icon icon;

  public RolloverIcon(Icon icon)
  {
    this.icon = icon;
  }

  public int getIconHeight()
  {
    return icon.getIconHeight();
  }

  public int getIconWidth()
  {
    return icon.getIconWidth();
  }

  public void paintIcon(Component c, Graphics g, int x, int y)
  {
    Graphics2D graphics2d = (Graphics2D) g;
    Composite oldComposite = graphics2d.getComposite();
    graphics2d.setComposite(RolloverComposite.DEFAULT);
    icon.paintIcon(c, g, x, y);
    graphics2d.setComposite(oldComposite);
  }
}

This RolloverIcon class (from IBM DeveloperWorks) is a really terrific way to make your Swing application look and feel more "alive" to the end user. If you follow the steps shown in this JButton example I think you'll see it's a really terrific addition to your Swing application.

IBM DeveloperWorks code

When I first posted this article out here, I knew I didn't write the RolloverIcon class (because of the formatting and naming conventions used), but I couldn't remember where it came from. Thanks to a comment below, I can give proper credit to two authors at IBM DeveloperWorks (Joe Winchester and Renee Schwartz) for creating this class, and the related RolloverComposite class.

I feel bad enough that I posted the source code for their RolloverIcon class here, so I will refer you to their original article to download their source code for the RolloverComposite class. Again, they did all the hard work here, I'm just showing a slightly different way of using their classes with the Java button rollover example code in this article.