CODEWITHSUNDEEP
javaswinghoverjbutton
Randomize
Randomize

Reputation: 9103

Swing Jbutton: showing border and background only when it is hovered

I want to add a hovering-effect to my customized Swing.JButton similar to the icon on my Chrome Browser:

Before hover >>

enter image description here

After hover >>

enter image description here

I am able to set the button in the "before" status when it is created, but I am not able to create the "border + raised-background" when it is hovered. When I try to re-add the border to the button, I got a moving effect as after repainting a new border is inserted.

This is my current code:

public class MyButton extends JButton implements MouseListener {

public MyButton(String iconPath, String toolTip) {
    super(new ImageIcon(TipButton.class.getResource(iconPath)));
    addMouseListener(this);
    setBorder(null);
    setBorderPainted(false);
    setFocusPainted(false);
    setOpaque(false);
    setContentAreaFilled(false);
    setToolTipText(toolTip);
}

public MyButton(String iconPath, String name, String toolTip) {
    this(observers, iconPath, toolTip);
    setText(name);
}

@Override
public void mouseClicked(MouseEvent e) {}

@Override
public void mousePressed(MouseEvent e) {}

@Override
public void mouseReleased(MouseEvent e) {}

@Override
public void mouseEntered(MouseEvent e) {
    if (e.getSource() != this) return;

    setBorder(BorderFactory.createBevelBorder(BevelBorder.RAISED));
}

@Override
public void mouseExited(MouseEvent e) {
    if (e.getSource() != this) return;

    setBorder(null);
}

}

I suppose the main logic should be in the methods mouseEntered/mouseExited but I don't know how to get the wanted effect. Any idea?

Upvotes: 7

Views: 5062

Answers (4)

Randomize
Randomize

Reputation: 9103

I think I have found a solution. Using EmptyBorder with the same sizes (insets) of a raised border does the trick. Code:

public class SwingUtils {

public static JButton createMyButton (String iconPath, String toolTip) {
    final JButton b = new JButton (new ImageIcon(SwingUtils.class.getResource(iconPath)));
    final Border raisedBevelBorder = BorderFactory.createRaisedBevelBorder();
    final Insets insets = raisedBevelBorder.getBorderInsets(b);
    final EmptyBorder emptyBorder = new EmptyBorder(insets);
    b.setBorder(emptyBorder);
    b.setFocusPainted(false);
    b.setOpaque(false);
    b.setContentAreaFilled(false);
    b.setToolTipText(toolTip);
    b.getModel().addChangeListener(new ChangeListener() {
        @Override
        public void stateChanged(ChangeEvent e) {
            ButtonModel model = (ButtonModel) e.getSource();
            if (model.isRollover()) {
                b.setBorder(raisedBevelBorder);
            } else {
                b.setBorder(emptyBorder);
            }
        }
    });
    return b;
}

}

Note: as mKorbel says it would be using ChangeListener and the button created in a factory method instead of subclass JButton.

Upvotes: 7

mKorbel
mKorbel

Reputation: 109823

Upvotes: 1

Collin
Collin

Reputation: 306

In java 7 there is a BevelBorder class that looks to be what you are looking for. The 2 methods you will probably be interested in are

    paintRaisedBevel(Component c, Graphics g, int x, int y, int width, int height)

and

    paintLoweredBevel(Component c, Graphics g, int x, int y, int width, int height)

Here is the documentation on the class: http://docs.oracle.com/javase/7/docs/api/javax/swing/border/BevelBorder.html

Upvotes: 1

Jannis Alexakis
Jannis Alexakis

Reputation: 1319

Use different images for every state. You can set a different Icon for selected, disabled selected, disabled, pressed, rollover, rolloverEnabled, rolloverSelected. More info here.

Upvotes: 2

Related Questions