Setting multiple icons on JButton

Question

I have a JButton which I have set a custom icon on. Now I want it to display another icon ontop of the one that is already displayed when I drag my mouse cursor over it but I can't figure out how to do it because if I use button.setIcon(icon); it will replace the icon that already is displayed. How would I do this in an as easy way as possible?

score 4 · Answer 1 · edited May 23 '17 at 10:28

I have a JButton which I have set a custom icon on. Now I want it to display another icon ontop of the one that is already displayed when I drag my mouse cursor over it but I can't figure out how to do it because if I use button.setIcon(icon); it will replace the icon that already is displayed. How would I do this in an as easy way as possible

I think thats about JButton.setRolloverIcon(myIcon);

JButton has implemented those methods in API

JButton.setIcon(myIcon);
JButton.setRolloverIcon(myIcon);
JButton.setPressedIcon(myIcon);
JButton.setDisabledIcon(myIcon);

for example

Nate · Answer 2 · 2013-04-30T13:15:58.133

If your icons are already transparent you can easily implement your own Icon to combine the two -

public class CombineIcon implements Icon {
    private Icon top;
    private Icon bottom;

    public CombineIcon(Icon top, Icon bottom) {
        this.top = top;
        this.bottom = bottom;
    }

    public int getIconHeight() {
        return Math.max(top.getIconHeight(), bottom.getIconHeight());
    }

    public int getIconWidth() {
        return Math.max(top.getIconWidth(), bottom.getIconWidth());
    }

    public void paintIcon(Component c, Graphics g, int x, int y) {
        bottom.paintIcon(c, g, x, y);
        top.paintIcon(c, g, x, y);
    }
}

You use setRolloverIcon(icon) to specify the icon you want to show when the mouse is over the button.

Kai · Answer 3 · 2013-04-30T12:23:01.227

1

Create a second version of that button icon which contains the overlay. On mouse over switch to the image with the overlay.

Another approach could be to combine the icon with its overlay to a new icon in memory and place it as an icon on the button. This might be a good approach if your icons are frequently changing. If that's not the case I would definitely use the first approach.

edited Apr 30 '13 at 12:23

answered Apr 30 '13 at 12:11

Kai

38,985
14
88
103

but then I would have to have more images than necessary – Apr 30 '13 at 12:12
1

no u would not. here you will need only two images. One with overlay and another normal image that you want to show otherwise. Thats what i said in my answer below. – LPD Apr 30 '13 at 12:14
@LPD yes I would because I have two `JButton` that have different backgrounds and I want the second icon to show up when I hover over both of them so therefor I would have to have 4 images instead of 3 – Apr 30 '13 at 12:30

score 1 · Answer 4 · edited May 23 '17 at 12:31

I find this pretty easy.

import java.awt.*;
import java.awt.image.BufferedImage;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

class CombinedIconButton {

    public static BufferedImage getCombinedImage(BufferedImage i1, BufferedImage i2) {
        if (i1.getHeight() != i2.getHeight()
                || i1.getWidth() != i2.getWidth()) {
            throw new IllegalArgumentException("Images are not the same size!");
        }
        BufferedImage bi = new BufferedImage(
                i1.getHeight(), 
                i1.getWidth(), 
                BufferedImage.TYPE_INT_ARGB);
        Graphics g = bi.getGraphics();
        g.drawImage(i1,0,0,null);
        g.drawImage(i2,0,0,null);
        g.dispose();

        return bi;
    }

    public static void main(String[] args) throws Exception {
        URL url1 = new URL("https://i.stack.imgur.com/gJmeJ.png"); // blue circle
        URL url2 = new URL("https://i.stack.imgur.com/5v2TX.png"); // red triangle
        final BufferedImage bi1 = ImageIO.read(url1);
        final BufferedImage bi2 = ImageIO.read(url2);
        final BufferedImage biC = getCombinedImage(bi1,bi2);
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JPanel gui = new JPanel(new BorderLayout());

                JToggleButton b = new JToggleButton();
                b.setIcon(new ImageIcon(bi1));
                b.setRolloverIcon(new ImageIcon(biC));
                b.setSelectedIcon(new ImageIcon(bi2));

                gui.add(b);

                JOptionPane.showMessageDialog(null, gui);
            }
        };
        // Swing GUIs should be created and updated on the EDT
        // http://docs.oracle.com/javase/tutorial/uiswing/concurrency/initial.html
        SwingUtilities.invokeLater(r);
    }
}

Images borrowed from this answer.

LPD · Accepted Answer · 2013-04-30T12:38:15.847

0

One way to do that is:

Create an icon which you want to see when the pointer is hovered on top of the button by some image editing tool. And set that image once mousehover event occurs.

p.s. use any pic editing tool and you can easily create a overlay image.

I also saw now that there is a concept of roll over icon in AbsractButton class. You can use that as well.

edited Apr 30 '13 at 12:38

answered Apr 30 '13 at 12:12

LPD

2,833
2
29
48

*"set that image once mousehover event occurs."* Definitely ***not*** the way to do it. – Andrew Thompson Apr 30 '13 at 12:38
I realized different ways of doing that now. :P But I don t know why that cant be done. Not the best way, but one of the ways.. – LPD Apr 30 '13 at 12:39
2

You can knock a wall down by repeatedly ramming your head into it. It's ***possible,*** but I would not recommend it. – Andrew Thompson Apr 30 '13 at 12:42
Good one bro. :P Understood. I come from a Javascript background so I suggested that. – LPD Apr 30 '13 at 12:44

Setting multiple icons on JButton

5 Answers5