Creating Square Buttons in Swing

Question

I would like to create something like the following in Swing:

The top part is relatively easy: I can just create a table and display it. What I'm having trouble with is the square plus and minus buttons at the bottom, which are designed to add a new item or remove the selected item respectively. In particular, I haven't been able to make the square shape because on Mac OS X and some other platforms, JButtons are rectangles with rounded corners and I can't find a way to change that. Also, I'm wanting to make sure it's a perfect square and without any space in between buttons.

How can this be accomplished in a cross-platform way on Swing?

Answer 1

JButtons are rectangles with rounded corners and I can't find a way to change that.

Change the Border:

button.setBorder( new LineBorder(Color.BLACK) );

Edit.

Another approach is to create your own icon from an existing button. Something like the following:

JButton button = new JButton("+");
Dimension size = button.getPreferredSize();
size.x += 6;
size.y += 6;
button.setPreferredSize(size);
Rectangle rectangle = new Rectangle(3, 3, size.x - 3, size.y - 3);
ScreenImage buttonImage = ScreenImage(button, rectangle);
ImageIcon icon = new ImageIcon(buttonImage);

JButton plus = new JButton(icon);
plus.setBorder( ... );

The above code should create an image of your button on any platform. I increased the preferred size to avoid taking an image of the border.

You will need to use the Screen Image class.

Answer 2

This is most easily achieved by returning a preferred size that is NxN - where N is the larger of preferred width or height.

import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;

class SquareButton extends JButton {

    SquareButton(String s) {
        super(s);
    }

    @Override
    public Dimension getPreferredSize() {
        Dimension d = super.getPreferredSize();
        int s = (int)(d.getWidth()<d.getHeight() ? d.getHeight() : d.getWidth());
        return new Dimension (s,s);
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JComponent gui = new JPanel(new FlowLayout());
                for (int ii=0; ii<5; ii++) {
                    gui.add(new SquareButton("" + ii));
                }

                gui.setBorder(new EmptyBorder(4, 8, 4, 8));

                JFrame f = new JFrame("Square Buttons");
                f.add(gui);
                // Ensures JVM closes after frame(s) closed and
                // all non-daemon threads are finished
                f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                // See http://stackoverflow.com/a/7143398/418556 for demo.
                f.setLocationByPlatform(true);

                // ensures the frame is the minimum size it needs to be
                // in order display the components within it
                f.pack();
                // should be done last, to avoid flickering, moving,
                // resizing artifacts.
                f.setVisible(true);
            }
        };

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

Answer 3

You can set the size of a button using using setPreferredSize():

JButton button = new JButton("+");
button.setPreferredSize(new Dimension(10, 10));

You might be able to remove the rounded corners using:

button.setBorder(BorderFactory.createEmptyBorder());

If this does not work then you can override the paintComponent() method on JButton.

Answer 4

Well in order to make them square, you have 2 options: 1. Make the button hold an icon image of just a square image of a transparent image. 2. you could set the button dimensions on your own. I am not sure how to set the dimensions, but that is a an option you could choose. You can just create a JToolBar that is set on the BorderLayout.SOUTH end of the window whenever you add, and whatever buttons are added onto that, will be right next to each other. To add the buttons do this:

    JButton button1 = new JButton("+");
    JButton button2 = new JButton("-");
    JToolBar toolbar = new JToolBar();

    <JPanel,JFrame,Whatever>.add(toolbar, BorderLayout.SOUTH);

    toolbar.add(button1);
    toolbar.add(button2);

This will add the toolbar onto the JFrame, JPanel, or whatever you're adding it onto, and it will set it to the bottom of the screen as you see above.

Hope this helps!