How do I adjust the button sizes and move them to be in a different place?

Question

I'm trying to get some of the buttons to be bigger and be able to move them around to get them more to what my professor wants them to be but I'm not sure how to do it.

I decided to use a GridBagLayout but my professor never talked about it so I'm not sure if I'm missing anything or how exactly it works.

The image is what he wants us to get it too. Exactly like this.

import java.awt.GridBagLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GUI {
    public static JPanel buttonPanel;

    private static JFrame frame;

    public static void main(String[] args) {
        frame = new JFrame("Layout Question");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 500);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
        
        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new GridBagLayout());
        frame.add(mainPanel);
        
        buttonPanel = new JPanel();
        mainPanel.add(buttonPanel);
        buttonPanel.add(new JButton("hi"));
        buttonPanel.add(new JButton("long name"));
        buttonPanel.add(new JButton("bye"));
        buttonPanel.add(new JButton("1"));
        buttonPanel.add(new JButton("2"));
        buttonPanel.add(new JButton("3"));
        buttonPanel.add(new JButton("4"));
        buttonPanel.add(new JButton("5"));
        buttonPanel.add(new JButton("6"));
        buttonPanel.add(new JButton("7"));
        buttonPanel.add(new JButton("Cancel"));
    }

}

Answer 1

There are some improvements you can do to your code:

1. Don't use static variables, and place your program on the EDT, an easy way to do this is:

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new LayoutManagersExample()::createAndShowGUI);
    }
   

2. Don't call setSize(...) on your JFrame, it's going to make your window smaller than you think, it's taking the frame decorations into the calculation for the size, instead call frame.pack(), or override the getPreferredSize() of your JPanel, see Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing? for a more in-depth explanation.

3. Don't call frame.setVisible(true) before you've added all your components to your JFrame, otherwise you'll get strange bugs related to invisible components, that line should be the last one on your code.

4. Divide and conquer, you can use multiple JPanels with different Layout Managers, and you can combine them and join them together later on.

One possible approach (which isn't exactly as your teacher wants it to be but is close enough) is this one:

import java.awt.BorderLayout;
import java.awt.GridLayout;

import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JCheckBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class LayoutManagersExample {
    private JFrame frame;
    
    private JPanel pane;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new LayoutManagersExample()::createAndShowGUI);
    }
    
    private void createAndShowGUI() {
        frame = new JFrame("Layout Question");
        
        pane = new JPanel();
        
        JPanel topPanel = getTopPanel();
        JPanel boxesPanel = getBoxesPanel();
        JPanel buttonsPanel = getButtonsPanel();
        
        pane.add(boxesPanel);
        pane.add(buttonsPanel);
        
        frame.add(pane);
        frame.add(topPanel, BorderLayout.NORTH);
        frame.add(new JButton("Cancel"), BorderLayout.SOUTH);
        
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //frame.setSize(500, 500);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
    
    private JPanel getButtonsPanel() {
        JPanel buttonsPanel = new JPanel();
        buttonsPanel.setLayout(new GridLayout(2, 2));
        
        buttonsPanel.add(new JButton("1"));
        buttonsPanel.add(new JButton("2"));
        buttonsPanel.add(getInnerButtonsPanel());
        buttonsPanel.add(new JButton("7"));
        
        return buttonsPanel;
    }
    
    private JPanel getInnerButtonsPanel() {
        JPanel innerButtonsPanel = new JPanel();
        innerButtonsPanel.setLayout(new GridLayout(2, 2));
        
        innerButtonsPanel.add(new JButton("3"));
        innerButtonsPanel.add(new JButton("4"));
        innerButtonsPanel.add(new JButton("5"));
        innerButtonsPanel.add(new JButton("6"));
        
        return innerButtonsPanel;
    }
    
    private JPanel getBoxesPanel() {
        JPanel boxesPanel = new JPanel();
        boxesPanel.setLayout(new BoxLayout(boxesPanel, BoxLayout.PAGE_AXIS));
        
        boxesPanel.add(new JCheckBox("Bold"));
        boxesPanel.add(new JCheckBox("Italic"));
        boxesPanel.add(new JCheckBox("Underline"));
        boxesPanel.add(new JCheckBox("Strikeout"));
        
        return boxesPanel;
    }
    
    private JPanel getTopPanel() {
        JPanel topPanel = new JPanel();
        JPanel topButtonsPanel = new JPanel();
        
        topButtonsPanel.setLayout(new GridLayout());
        
        topButtonsPanel.add(new JButton("hi"));
        topButtonsPanel.add(new JButton("long name"));
        topButtonsPanel.add(new JButton("bye"));
        
        topPanel.add(new JLabel("Buttons: "));
        topPanel.add(topButtonsPanel);
        return topPanel;
    }
}

Play around with the code, and try to find a different approach by combining the layouts, divide each piece of the window in your head and see how to apply a different layout manager to each of them, divide them in methods as I did to make things easier to follow.

Find a way to left align the elements in the JCheckBoxes for example, and other things