Swing: Need a FourSquare and Bottom Button Layout

Question

I am trying to make a layout that has 4 squares that make a larger square and a button beneath that stretches across the square.

I tried GridLayout where I created the square perfectly but the button did not stretch across the screen.

I also tried GridBagLayout but there was spacing and the square was small and it was bad.

PS: The buttons are button1, button2, button3, button4, for the square, and start for the bottom button.

Also I want the square to be 400x400.

My code with GridLayout :

this.setLayout(new GridLayout(3,2));




        button1 = new JButton();
        //button1.setBackground(Color.green);
        button1.setBounds(0, 0, 200, 200);

        button2 = new JButton();
        //button2.setBounds(0, 200, 200, 200);
        button2.setBackground(Color.red);

        button3 = new JButton();
        //button3.setBackground(Color.yellow);
        button3.setBounds(200, 0, 200, 200);

        button4 = new JButton();
        //button4.setBounds(200, 200, 200, 200);
        button4.setBackground(Color.blue);

        start = new JButton("Start");
        //start.setBounds(300, 300, 100, 100);

        this.add(button1);
        this.add(button2);
        this.add(button3);
        this.add(button4);
        this.add(start);

Answer 1

Try using component layouts...A combination of BorderLayout and GridLayout should give you the results you need.

import java.awt.BorderLayout;
import java.awt.EventQueue;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class FourSquare {

    public static void main(String[] args) {
        new FourSquare();
    }

    public FourSquare() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JPanel squarePane = new JPanel(new GridLayout(2, 2));
                JPanel controlPane = new JPanel(new BorderLayout());

                squarePane.add(new JButton("1"));
                squarePane.add(new JButton("2"));
                squarePane.add(new JButton("3"));
                squarePane.add(new JButton("4"));

                controlPane.add(squarePane);
                controlPane.add(new JButton("Bottom"), BorderLayout.SOUTH);

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(controlPane);
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

}

Answer 2

I can't ask questions as comments yet, but I'm guessing you want a square consisting of four buttons using gridlayout and then a longer button stretched out below that?

(Like this?)

[1] [2]
[3] [4]
[start]

For me, I would accomplish that with this:

//assuming this code is in a class that extends JFrame
this.setLayout( new BorderLayout() );

JPanel pnlSquare = new JPanel( new GridLayout( 2 , 2 ) );
button1.setPreferredSize( new Dimension( 200 , 200 ) );
pnlSquare.add( button1 );
button2.setPreferredSize( new Dimension( 200 , 200 ) );
pnlSquare.add( button2 );
button3.setPreferredSize( new Dimension( 200 , 200 ) );
pnlSquare.add( button3 );
button4.setPreferredSize( new Dimension( 200 , 200 ) );
pnlSquare.add( button4 );
this.add( pnlSquare , BorderLayout.CENTER );

this.add( start , BorderLayout.SOUTH );

Let me know if this is okay.

Also, if this is for a school project, you'd better make sure you can explain the code though, or you could get in trouble for plagiarism.