Darken JButton(s) on hover/click

Question

ImageIcon backpackImageIcon = new ImageIcon("images/gui/button_backpack.png");
JButton backpackButton = new JButton();
backpackButton.setBounds(660,686,33,33);
backpackButton.setBorderPainted(false);
backpackButton.setFocusPainted(false);
backpackButton.setVisible(true);
backpackButton.getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(KeyStroke.getKeyStroke("B"), "backpackButtonPress");
backpackButton.getActionMap().put("backpackButtonPress", ClassBackpackButton);
backpackButton.setAction(ClassBackpackButton);
backpackButton.setIcon(backpackImageIcon);
backpackButton.setToolTipText("Backpack[B]");
panel.add(backpackButton);

I have multiple buttons set up this exact way. What I was hoping to be able to do was to have them darken 10% on hover and maybe 20% on click. I tried to look around for how to do this but had no luck(only found javascript stuff). Sorry if this has been asked before and thanks for any help.

** EDIT **

I have tried to do this but it just turns the image blank:

BufferedImage bufferedImage = null;
try {
    bufferedImage = ImageIO.read(new File("images/gui/button_backpack.png"));
} catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}
BufferedImage darkerBackpackBufferedImage = new BufferedImage(32, 32, BufferedImage.TYPE_BYTE_INDEXED);
RescaleOp op = new RescaleOp(1.3f, 0, null);
darkerBackpackBufferedImage = op.filter(bufferedImage, null);
ImageIcon darkerBackpackImageIcon = new ImageIcon((Image) darkerBackpackBufferedImage);
backpackButton.setRolloverIcon((ImageIcon) darkerBackpackImageIcon);

** EDIT ** with solution

here is the modified shiftColor function that I went with for anyone reading this above... good luck :)

public BufferedImage shiftColor(BufferedImage img, int rShift, int gShift, int bShift) {
    Color tmpCol;
    int tmpRed, tmpGreen, tmpBlue;
    for (int x = 0; x < img.getWidth(); x++) {
        for (int y = 0; y < img.getHeight(); y++) {
            tmpCol=new Color(img.getRGB(x,y));
            tmpRed = (tmpCol.getRed()-rShift < 0) ? 0 : tmpCol.getRed()-rShift; //if shifted color is less than 0 change to 0
            tmpGreen = (tmpCol.getGreen()-gShift < 0) ? 0 : tmpCol.getGreen()-gShift; //if shifted color is less than 0 change to 0
            tmpBlue = (tmpCol.getBlue()-bShift < 0) ? 0 : tmpCol.getBlue()-bShift; //if shifted color is less than 0 change to 0
            tmpCol=new Color(tmpRed, tmpGreen, tmpBlue);
            img.setRGB(x,y,tmpCol.getRGB());
        }
    }
    return img;
}

score 5 · Answer 1 · edited May 23 '17 at 10:24

5

there are two ways

1) use built-in methods in JButtons API

button.setIcon((Icon i));
button.setRolloverIcon((Icon i));
button.setPressedIcon(Icon i));
button.setDisabledIcon(Icon i));

2) use ButtonModel

edited May 23 '17 at 10:24

Community

1
1

answered Apr 24 '12 at 21:07

mKorbel

109,525
20
134
319

1

+1 Use `RescaleOp`, illustrated [here](http://stackoverflow.com/a/10208380/230513), to alter a single `Icon` for each use. – trashgod Apr 24 '12 at 23:23

eabraham · Accepted Answer · 2012-04-25T13:12:25.550

1

This function will return a BufferedImage with a color offset (ie. lighter/darker)

public BufferedImage shiftColor(BufferedImage img, int rShift, int gShift,int bShift) {
    Color tmpCol;
    for (int x = 0; x < img.getWidth(); x++) {
        for (int y = 0; y < img.getHeight(); y++) {
            tmpCol=new Color(img.getRGB(x,y));
            tmpCol=new Color(tmpCol.getRed()-rShift,tmpCol.getGreen()-gShift,tmpCol.getBlue()-bShift);
            img.setRGB(x,y,tmpCol.getRGB());
        }
    }
    return img;
}

Even though this will work, I still recommend creating both the light and dark image in an image editor (ie. Photoshop) and loading both at startup. The above code will be process intensive and will slow your apps runtime.

edited Apr 25 '12 at 13:12

answered Apr 24 '12 at 21:32

eabraham

4,094
1
23
29

tmpCol=new Color(img.getRGB()); The method getRGB(int, int) in the type BufferedImage is not applicable for the arguments () – KisnardOnline Apr 24 '12 at 21:52
1

pretty sure it should be getRGB(x, y); not trying to be a pain at all, i really appreciate the help, just wanted to correct for anyone who find this post – KisnardOnline Apr 24 '12 at 21:54
1

Instead, use `RescaleOp`, illustrated [here](http://stackoverflow.com/a/10208380/230513). – trashgod Apr 24 '12 at 23:22

eabraham · Answer 3 · 2012-04-24T21:11:06.857

0

Check out this tutorial. You are probably interested in mouseEntered. As instead of changing the color of the backpack in Java consider 2 images, one of a light backpack and another of a dark backpack. Change them when you hover over the button.

public class MouseEventDemo implements MouseListener {
    ImageIcon backpackImageIcon = new ImageIcon("images/gui/button_backpack.png");
    JButton backpackButton = new JButton();
    backpackButton.setBounds(660,686,33,33);
    backpackButton.setBorderPainted(false);
    backpackButton.setFocusPainted(false);
    backpackButton.setVisible(true);
    backpackButton.addMouseListener(this);
    addMouseListener(this);

    backpackButton.setIcon(backpackImageIcon);
    backpackButton.setToolTipText("Backpack[B]");
    panel.add(backpackButton);  

    public void mousePressed(MouseEvent e) {}

    public void mouseReleased(MouseEvent e) {}

    public void mouseEntered(MouseEvent e) {
       //set button color to dark color
    }
    public void mouseExited(MouseEvent e) {
       //set button color to light color
    }
    public void mouseClicked(MouseEvent e) {}

}

edited Apr 24 '12 at 21:11

answered Apr 24 '12 at 20:02

eabraham

4,094
1
23
29

I can use setRolloverIcon() but need help with making images darker – KisnardOnline Apr 24 '12 at 21:04
@JayAvon: so why not make darker images, put them in ImageIcons, and then set them as your rollover images? Up-voting this to cancel your down-vote. – Hovercraft Full Of Eels Apr 24 '12 at 21:07
because I dont want to open every button in PhotoShop and darken them 10% and 20% and then change my mind and have to do them all over again. I want to write code to do it for me so if I change my mind later I can type a new XX%. Is there no way to darken an ImageIcon?? – KisnardOnline Apr 24 '12 at 21:15
@JayAvon `op.filter(bufferedImage, bufferedImage);` not `op.filter(bufferedImage, null);` and prepare all Icons on applications startup, create as local variable once, not on the fly – mKorbel Apr 24 '12 at 21:29
@JayAvon: who said anything about PhotoShop? This all can be done in Java. – Hovercraft Full Of Eels Apr 24 '12 at 21:45
@Hovercraft Full Of Eels sorry i didnt realize you meant make darker images in Java... thanks for the help everyone. – KisnardOnline Apr 24 '12 at 21:49
@JayAvon glad to help you, but I'd be use two Icons rather than whatever ZOO :-) – mKorbel Apr 24 '12 at 21:53

Darken JButton(s) on hover/click

3 Answers3