GridBagLayout, adding space between JButtons

Question

I'm trying in vain to add some space between my buttons, I have tried many tips like emptyBorder, or glue but I failed to succeed. Also I can't explain the white border on "Next" and "Previous" so I can't remove it

This is what I have :

Here a runnable snippet :

package gridspace;

import java.awt.BorderLayout;
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;

public class GridSpace extends JPanel {

   public static void main(String[] args) {
      GridSpace test = new GridSpace();
   }

   public GridSpace() {
      JFrame frame = new JFrame();
      frame = new JFrame();
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setResizable(false);
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
      frame.setLayout(new BorderLayout());
      JPanel firstPanel = new JPanel();
      JPanel buttonPanel = new JPanel(new GridLayout(5, 4));
      JPanel buttonPanelOption = new JPanel();
      firstPanel.setBackground(Color.RED);
      firstPanel.setLayout(new GridBagLayout());

      JButton button[] = new JButton[20];
      JButton buttonNext = new JButton("Next");
      JButton buttonPrevious = new JButton("Previous");

      GridBagConstraints c = new GridBagConstraints();
      Insets insets = new Insets(10, 10, 10, 10);
      c.insets = insets;
      c.weightx = 1;
      c.gridwidth = 30;

      buttonNext.setPreferredSize(new Dimension(100, 20));
      buttonPrevious.setPreferredSize(new Dimension(100, 20));
      for (int i = 0; i < 20; i++) {
         button[i] = new JButton(Integer.toString(i + 1));
         buttonPanel.add(button[i]);
      }
      c.gridx = 3;
      c.gridy = 0;

      firstPanel.add(buttonPanel, c);

      buttonPanelOption.add(buttonPrevious);
      buttonPanelOption.add(buttonNext);

      c.gridx = 3;
      c.gridy = 1;

      firstPanel.add(buttonPanelOption, c);
      frame.getContentPane().add(firstPanel);
      frame.pack();

   }
}

Answer 1

This has nothing to do with GridBagLayout. Instead improve your GridLayout constructor call. Change:

JPanel buttonPanel = new JPanel(new GridLayout(5, 4));

to

// to give a 5 point gap around each item in the grid.
JPanel buttonPanel = new JPanel(new GridLayout(5, 4, 5, 5)); 

Regarding:

Also I can't explain the white border on "Next" and "Previous" so I can't remove it

That is there because the JPanel holding it is opaque. Set it to non-opaque and the background color of the main container shows through.

For example:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.GridLayout;
import javax.swing.*;

public class Test3 extends JPanel {
   private static final int BTN_COUNT = 20;
   private static final int GAP = 5;
   private static final Color BG = Color.RED;

   public Test3() {
      JPanel btnPanel = new JPanel(new GridLayout(0, 4, GAP, GAP));
      for (int i = 0; i < BTN_COUNT; i++) {
         btnPanel.add(new JButton(String.valueOf(i + 1)));
      }
      btnPanel.setOpaque(false);

      JPanel southPanel = new JPanel(new GridLayout(1, 0, GAP, 0));
      southPanel.add(new JButton("Previous"));
      southPanel.add(new JButton("Next"));
      southPanel.setOpaque(false);

      setBackground(BG);
      setBorder(BorderFactory.createEmptyBorder(GAP, GAP, GAP, GAP));
      setLayout(new BorderLayout(GAP, GAP));
      add(btnPanel, BorderLayout.CENTER);
      add(southPanel, BorderLayout.PAGE_END);
   }

   private static void createAndShowGui() {
      JFrame frame = new JFrame("Test3");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.getContentPane().add(new Test3());
      frame.pack();
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         public void run() {
            createAndShowGui();
         }
      });
   }
}