0

I'm trying to build my custom button for a little game, and I use a JLabel with an icon like this:

JLabel playButton = new JLabel("Play!", Images.getWoodImage(), JLabzl.CENTER);
playButton.setFont(Fonts.getBlueberryFont());
playButton.setHorizontalTextPosition(SwingConstants.CENTER);
playButton.setVerticalTextPosition(SwingConstants.CENTER);
playButton.setBounds(230, 400, 300, 100);

The problem is that I want my buttons to move a little when my cursor enters them; so I don't use default Layouts (I put this.setLayout(null)). So for my button's MouseListener I use this block of code:

    @Override
    public void mouseEntered(MouseEvent mouseEvent) {
        playButton.setBounds(240, 410, 300, 100);   // x + 10 & y + 10
    }

    @Override
    public void mouseExited(MouseEvent mouseEvent) {
        playButton.setBounds(230, 400, 300, 100);   // reverse the move
    }

But it doesn't work the way I want, the button does move but I'm getting this white rectangle behind the icon:

enter image description here

ALSO the same happens when I don't move the button and just change the foregroundColor.

Is there a way I can prevent this without using default layouts?

camickr
  • 321,443
  • 19
  • 166
  • 288
  • 2
    Avoid null layouts. Better to use layout managers, even if you want to move components. To improve your question, post an image of what you are trying to achieve as well as a [mre] program in your question – Hovercraft Full Of Eels Dec 26 '20 at 17:28
  • 1
    Layouts are there to hep the programmers. It is much easier to use them than to avoid them. – NomadMaker Dec 26 '20 at 17:31
  • 1) For better help sooner, [edit] to add a [MCVE] or [Short, Self Contained, Correct Example](http://www.sscce.org/). 2) One way to get image(s) for an example is to hot link to images seen in [this Q&A](http://stackoverflow.com/q/19209650/418556). E.G. The code in [this answer](https://stackoverflow.com/a/10862262/418556) hot links to an image embedded in [this question](https://stackoverflow.com/q/10861852/418556). – Andrew Thompson Dec 27 '20 at 10:09

2 Answers2

1

Instead of using a null layout you can center the label on the panel by using:

panel.setLayout( new GridBagLayout() );
playButton.setBorder( new EmptyBorder(0, 0, 10, 10) );
panel.add(playButton, new GridBagConstraints());

Then in the MouseListener try:

@Override
public void mouseEntered(MouseEvent mouseEvent) {
    playButton.setBorder( new EmptyBorder(10, 10, 0, 0) );
}

@Override
public void mouseExited(MouseEvent mouseEvent) {
    playButton.setBorder( new EmptyBorder(0, 0, 10, 10) );
}

This should give the effect of the image moving.

camickr
  • 321,443
  • 19
  • 166
  • 288
0

Try setOpaque(false). Also make sure you are using a .png as picture as .jpg images always have white background.

Martin
  • 19
  • 1
  • I tried it and it still doesn't work. I have a png file and it's transparent, the white rectangle appears after I change the location. AND I just used BoxLayout and when I chang the foreground the white rectangle appears again! – Ellenor Fatemeh Taghayor Dec 26 '20 at 17:19