Java GridBagLayout can't properly set my GUI

Question

I am trying to make a tictactoe game. For the 3x3 tictactoe table I am using 9 buttons. However, it seems like the jtext above and below the buttons change the length of each 3x3 button. Is there a way that I can set the 3x3 buttons equally sized without the interference from other components.

import java.awt.Button;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import java.awt.Dimension;


public class makeGUI {

    JFrame frame;

    public void initialise() {

        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


        JPanel playPanel = new JPanel();

        playPanel.setPreferredSize(new Dimension(300, 500));

        playPanel.setBackground(Color.WHITE);


        playPanel.setLayout(new GridBagLayout());
        GridBagConstraints c = new GridBagConstraints();

        JTextField field = new JTextField(5);
        field.setEditable(false);
        c.gridwidth = 2;
        c.gridx = 0;
        c.gridy = 0;
        playPanel.add(field, c);




        JButton button = new JButton("");
        //c.weightx = 0.5;  
        c.fill = GridBagConstraints.HORIZONTAL;
        c.gridx = 0;
        c.gridy = 1;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 1;
        c.gridy = 1;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 2;
        c.gridy = 1;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 0;
        c.gridy = 2;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 1;
        c.gridy = 2;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 2;
        c.gridy = 2;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);


        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 0;
        c.gridy = 3;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 1;
        c.gridy = 3;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);

        button = new JButton("");
        c.fill = GridBagConstraints.HORIZONTAL;
        //c.weightx = 0.5;
        c.gridx = 2;
        c.gridy = 3;
        c.gridwidth = 1;
        button.setPreferredSize(new Dimension(40, 40));
        playPanel.add(button, c);






        field = new JTextField(5);
        c.gridwidth = 1;
        c.gridx = 0;
        c.gridy = 4;
        playPanel.add(field, c);

        button = new JButton("Submit");
        c.fill = GridBagConstraints.BOTH;
        c.weightx = 0.5;
        c.gridx = 2;
        c.gridy = 4;
        playPanel.add(button, c);

        frame.add(playPanel);
        frame.setTitle("A Simple Card Game");
        frame.setSize(400, 700);
        frame.pack();
        frame.setVisible(true);

    }

}

This is what I have right now:

And I want something like:

Answer 1

This is how I'd break this GUI into parts:

• The red bordered area in the middle, GridLayout . The grid layout will ensure every cell is the width of the widest & height of the tallest component it contains.
• The green bordered area at the bottom would be a centered FlowLayout .
• The blue bordered outer panel would use BorderLayout . That in turn would contain:
  • A label in the PAGE_START
  • The grid layout in the CENTER
  • The FlowLayout at PAGE_END