2

I tried to program a small TicTacToe and gave the buttons I used for the game an icon depending on which player marked that button (you know, the traditional cross and circle).

Now, when I check my buttons "in game", the icons are a little bit off; there is a small (maybe 10 px big) gap between the icon and the button border.

I already tried this but it didn't work:

button.setHorizontalAlignement(SwingConstants.RIGHT)

Example Code:

JButton button = new JButton();
button.setPreferredSize(new Dimension(175,175));   //Note: Image is also 175x175
button.addActionListener(new MyOnClickListener());

...

class MyOnClickListener implements ActionListener{
    @Override
    public void actionPerformed(ActionEvent e){
        JButton button = (JButton) e.getSource();
        ImageIcon myIcon = new ImageIcon("source");
        button.setEnabled(false);
        button.setIcon(myIcon);
        button.setDisabledIcon(myIcon);
    }
}

Screenshot of button

See that little white margin to the right? This is what i don't want. I want the icon to fill the button completely. Here's the icon: Icon

Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
DarthDonut
  • 123
  • 6
  • Provide some code so we can reproduce the issue – XtremeBaumer Jul 03 '18 at 09:32
  • Welcome to SO! Afraid to help we'll need you to provide a [mcve] that reproduces the issue, and screenshots to show what it looks like at present and what you want it to look like. – Michael Berry Jul 03 '18 at 09:48
  • Hope it is clearer now! – DarthDonut Jul 03 '18 at 09:57
  • Can you add a raw image of the icon, without the button? Easier to reproduce that way. – tobias_k Jul 03 '18 at 10:04
  • Actually, it seems like I can not reproduce your problem, using a solid-black icon on a red button. The button is showing a one-pixel border around the icon, but otherwise the image is centered and fills the button. – tobias_k Jul 03 '18 at 10:12
  • 1) `button.setPreferredSize(new Dimension(175,175)); //Note: Image is also 175x175` Note, don't force a size. 2) For better help sooner, post a [MCVE] or [Short, Self Contained, Correct Example](http://www.sscce.org/). – Andrew Thompson Jul 03 '18 at 11:28
  • .. 3) Check [this answer](https://stackoverflow.com/a/10862262/418556) for tips on configuring the button to be the same size as the icon it is displaying. – Andrew Thompson Jul 03 '18 at 11:31

1 Answers1

1

To remove extraneous space, set the border of the button to null. This might require (in some PLAFs) changing the look of the icon itself to indicate focus, hover, pressed etc.

In this screenshot, the middle button in the right hand column is focused, while the mouse is hovering over the middle button in the bottom row.

enter image description here

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

public class TicTacToeButtons {

    private JComponent ui = null;
    private String path = "https://i.stack.imgur.com/sAU9n.png";
    private BufferedImage image;
    Image transparentImage;

    private JButton getButton(int i) {
        Image img = (i%2==0 ? image : transparentImage);
        JButton b = new JButton(new ImageIcon(img));
        b.setBorder(null);
        return b;
    }

    TicTacToeButtons() {
        try {
            initUI();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    public void initUI() throws Exception {
        if (ui!=null) return;

        image = ImageIO.read(new URL(path));
        transparentImage = new BufferedImage(
                image.getWidth(),image.getHeight(),BufferedImage.TYPE_INT_ARGB);

        ui = new JPanel(new GridLayout(3,3));
        ui.setBorder(new EmptyBorder(4,4,4,4));
        for (int ii=0; ii<9; ii++) {
            ui.add(getButton(ii));
        }
    }

    public JComponent getUI() {
        return ui;
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (Exception useDefault) {
                }
                TicTacToeButtons o = new TicTacToeButtons();

                JFrame f = new JFrame(o.getClass().getSimpleName());
                f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                f.setLocationByPlatform(true);

                f.setContentPane(o.getUI());
                f.pack();
                f.setMinimumSize(f.getSize());

                f.setVisible(true);
            }
        };
        SwingUtilities.invokeLater(r);
    }
}
Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
  • *"In my case, the button does not have an icon right until after being clicked."* It is possible to 'pre fill' the button with a *transparent* image of the same size. See edited code & screen shot for details. – Andrew Thompson Jul 03 '18 at 15:10