GridBagLayout formatting for JButtons

Question

My partner and I are writing this program for a game. He used GridBagLayout for our grid and I'm trying to troubleshoot some problems with the grid.

Here's the code:

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

@SuppressWarnings("serial")
public class NewGame extends JFrame{

    private int width = 500, height = 500, xSquares = 4, ySquares = 4;
    Font buttonFont = new Font("Times New Roman", Font.PLAIN, 15);
    endGame end = new endGame();
    
    public NewGame() {
        super("OnO");

        // gridbaglayout is flexible but kinda complicated
        GridBagLayout Griddy = new GridBagLayout();
        this.setLayout(Griddy);
        JPanel p = new JPanel();
        p.setLayout(Griddy);
        this.add(p);

        GridBagConstraints c = new GridBagConstraints();

        c.fill = GridBagConstraints.BOTH;

        c.weightx = 1;
        c.weighty = 1;

        c.gridwidth = 4;
        c.gridheight = 4;

        NewBoard board = new NewBoard(xSquares, ySquares);
        // board at top left
        c.gridx = 0;
        c.gridy = 0;

        this.add(board, c);
        
        // find a way to make buttons smaller
                        
        JButton EndGame = new JButton("End");
        EndGame.setBackground(Color.black);
        EndGame.setForeground(Color.white);
        EndGame.setFont(buttonFont);
        EndGame.addActionListener(end);

        JButton Undo = new JButton("Undo");
        Undo.setBackground(Color.black);
        Undo.setForeground(Color.white);
        Undo.setFont(buttonFont);

        JButton NewGame = new JButton("New Game");
        NewGame.setBackground(Color.black);
        NewGame.setForeground(Color.white);
        NewGame.setFont(buttonFont);

        // fit 3
        c.gridwidth = 1;
        c.gridheight = 1;
        c.gridy = 3;
        c.fill = GridBagConstraints.HORIZONTAL;
        p.add(EndGame, c);
        
        c.gridx = 2;
        c.fill = GridBagConstraints.HORIZONTAL;
        p.add(Undo, c);
        
        c.gridx = 3;
        c.fill = GridBagConstraints.HORIZONTAL;
        p.add(NewGame, c); 
        
 
        this.setPreferredSize(new Dimension(width, height));
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.pack();
        this.setLocation(450, 30);
        this.setVisible(true);
    }
    
    public class endGame implements ActionListener {
        public void actionPerformed(ActionEvent event) {
                System.exit(0);
            } 
    }
    
    public class newGame implements ActionListener {
        public void actionPerformed(ActionEvent event) {
            
        }
    }
    
}

When this code is run with the other classes in our program, the endGame, Undo, and NewGame buttons overlap with the board:

I want to find a way to display the 3 buttons either above or below the board in its individual space, but I've tinkered with the code for a long time and can't find the solution yet. I'm not sure what I should be doing here.

Answer 1

First of all, variable names should NOT start with an upper case character. Learn and follow Java naming conventions.

I want to find a way to display the 3 buttons either above or below the board

Simplest solution is to not use a GridBagLayout for the frame.

Just use the default BorderLayout of the frame. Then you can use a JPanel with the FlowLayout for your buttons, and a GridLayout for your board panel.

The basic logic would be:

JPanel buttons = new JPanel(); 
buttons.add(endGame);
buttons.add(undo);
buttons.add(newGame);
this.add(button, BorderLayout.PAGE_START);

NewBoard board = new NewBoard(xSquares, ySquares);
this.add(board, BorderLayout.CENTER);

By default a JPanel uses a FlowLayout so the buttons will be displayed on a single row.

Read the Swing tutorial on Layout Managers for more information and working examples to better understand how this suggestion works.