Alignment issue in GridBagLayout

Question

Please have a look at the following code

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

public class TestForm extends JFrame
{
    private JLabel heightLabel, weightLabel, waistLabel, neckLabel, hipsLabel,bfPercentageLabel;

    private JTextField heightTxt, weightTxt, waistTxt, neckTxt, hipsTxt;

    private JPanel centerPanel;
    private JPanel southPanel;
    private JLabel endTargetWeightLabel;
    private JLabel endTargetWeightResultLabel;
    private JLabel fatMustLoseLabel;
    private JLabel fatMustLoseResultLabel;


      public TestForm()
      {
        //Declaring instance variables  
        heightLabel = new JLabel("Height: ");
        weightLabel = new JLabel("Weight: ");
        waistLabel = new JLabel("Waist: ");
        neckLabel = new JLabel("Neck: ");
        hipsLabel = new JLabel("Hips: ");        
        bfPercentageLabel = new JLabel("The Orginal Test Score Is: ");

        heightTxt = new JTextField(7);
        weightTxt = new JTextField(7);
        waistTxt = new JTextField(7);
        neckTxt = new JTextField(7);
        hipsTxt = new JTextField(7);

        endTargetWeightLabel = new JLabel("Your End Target Performance is: ");
        fatMustLoseLabel = new JLabel("Sammple Performance You Must Lose: ");


        endTargetWeightResultLabel = new JLabel("d");
        fatMustLoseResultLabel = new JLabel("e");

        this.add(createNorthPanel(),"North");
        this.add(createCenterPanel(),"Center");
        this.add(createSouthPanel(),"South");
        this.add(new JPanel(),"West");
        this.add(new JPanel(),"East");
        this.setTitle("The Test Form");
        this.pack();
        this.setLocationRelativeTo(null);
        this.setVisible(true);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


    }

    private JPanel createNorthPanel()
    {
        JPanel northPanel = new JPanel();

        northPanel = new JPanel();
        northPanel.setLayout(new FlowLayout());

        JLabel logoLabel = new JLabel();
        logoLabel.setIcon(new ImageIcon(getClass().getResource("/images/TESTING-LOGO.gif")));

        northPanel.add(logoLabel);

        return northPanel;
    }


    private JPanel createCenterPanel()
    {
        centerPanel = new JPanel();

        GridBagLayout gbl = new GridBagLayout();
        GridBagConstraints gbc = new GridBagConstraints();

        centerPanel.setLayout(gbl);

        gbc.gridx = 1;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,0,0,0);
        centerPanel.add(heightLabel,gbc);

        gbc.gridx = 2;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,0,0,0);
        centerPanel.add(heightTxt,gbc);

        gbc.gridx = 3;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,10,0,0);
        centerPanel.add(weightLabel,gbc);

        gbc.gridx = 4;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,-10,0,0);
        centerPanel.add(weightTxt,gbc);

        gbc.gridx = 1;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,0,0,0);
        centerPanel.add(waistLabel,gbc);

        gbc.gridx = 2;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,0,0,0);
        centerPanel.add(waistTxt,gbc);

        gbc.gridx = 3;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,10,0,0);
        centerPanel.add(neckLabel,gbc);

        gbc.gridx = 4;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,-10,0,0);
        centerPanel.add(neckTxt,gbc);

        gbc.gridx = 5;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,7,0,0);
        centerPanel.add(hipsLabel,gbc);

        gbc.gridx = 6;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(15,5,0,0);
        centerPanel.add(hipsTxt,gbc);



        gbc.gridx = 1;
        gbc.gridy = 5;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(50,0,0,0);
        gbc.gridwidth = 6;
        centerPanel.add(bfPercentageLabel,gbc);


        centerPanel.setBorder(BorderFactory.createTitledBorder("The Testing Form"));

        centerPanel.setPreferredSize(centerPanel.getPreferredSize());
        centerPanel.validate();

        return centerPanel;

    }


     private JPanel createSouthPanel()
    {
        southPanel = new JPanel();

        GridBagLayout gbl = new GridBagLayout();
        GridBagConstraints gbc = new GridBagConstraints();

        southPanel.setLayout(gbl);


        gbc.gridx = 1;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(10,0,0,0);
        southPanel.add(endTargetWeightLabel,gbc);

        gbc.gridx = 2;
        gbc.gridy = 1;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(10,5,0,0);
        southPanel.add(endTargetWeightResultLabel,gbc);

        gbc.gridx = 1;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(10,0,0,0);
        southPanel.add(fatMustLoseLabel,gbc);

        gbc.gridx = 2;
        gbc.gridy = 2;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(10,5,0,0);
        southPanel.add(fatMustLoseResultLabel,gbc);

        southPanel.setPreferredSize(new Dimension(centerPanel.getWidth(),100));
        southPanel.setBorder(BorderFactory.createTitledBorder("See Your End Target Weight"));

        return southPanel;
    }

    public static void main(String[]args)
    {
        try
        {
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
            new TestForm();
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }

    }
}

The above is the maximum shortened code possible. Removing further more elements will not display the original error.

OK. Now the problem is about alignment. Once you run the code, you will see the following.

As you can see in there, there elements in the southPanel are not aligned well with centerPanel. Which means, I expect that southPanel JLabels to come into the same line where the centerPanel JLabels start. But it ended up in this way. I want the JLabels in southPanel to be appeared in the same line where the JLabels of centerPanel begins. What I am telling is clearly displayed in the following image. How can I do it? Please help!

PS: I am attaching the "Test Image" as well, so you can test it if you want.

Answer 1

Since each panel is being centered horizontally, they will not align unless they have the same width. It would be easier to put them in a common panel and share a GridBagLayout.

You could change the top level layout to left-align your components (e.g. in another GridBagLayout with WEST/LEFT anchors).

Side note: Those negative insets are going to get you into trouble. Side note2: instead of setting gridx and gridy manually, look into REMAINDER Side note 3: most of your gbc are indentical. reuse them.

this.setLayout(new GridBagLayout());
this.add(createLeftPanel(), gbc);
...