The alignment of Java Layout is messed up

Question

Trying to build a simple registration form in Java Swing and AWT, but couldn't accomplish what I really want.

Here is the result that I want

enter image description here

Here's the code

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


public class MainFrame {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    // Main Frame
    JFrame mainFrame = new JFrame("New Account Registration");

    JPanel borderPanel = new JPanel(new BorderLayout());
    JPanel gridPanel = new JPanel(new GridLayout(9,2));

    JPanel gridGenderPanel = new JPanel(new GridLayout(1,2));
    JPanel flowButton = new JPanel(new FlowLayout());

    //JLabels
    JLabel title = new JLabel("New Account Registration");
    JLabel name = new JLabel("Name");
    JLabel email = new JLabel("Email Address:");
    JLabel createPassword = new JLabel("Create Password:");
    JLabel confirmPassword = new JLabel("Confirm Password:");
    JLabel gender = new JLabel("Gender:");
    JLabel address = new JLabel("Address:");
    JLabel state = new JLabel("State:");
    JLabel country = new JLabel("Country:");
    JLabel phoneNo = new JLabel("Phone No:");


    String[] coutriesStrings = { "America", "Japan", "India", "Korea", "Sweden" };

    // JTextFields, JRadioButton, JComboBox
    JTextField nameField = new JTextField();
    JTextField emailField = new JTextField();
    JPasswordField passField = new JPasswordField();
    JPasswordField confirmPassField = new JPasswordField();
    JRadioButton male = new JRadioButton("Male");
    JRadioButton female = new JRadioButton("Female");
    ButtonGroup group = new ButtonGroup();
    group.add(male);
    group.add(female);
    JTextField addressField = new JTextField();
    JComboBox stateBox = new JComboBox(coutriesStrings);
    stateBox.setSelectedIndex(1);
    JTextField countryField = new JTextField();
    JTextField phoneField = new JTextField();

    JButton submitButton = new JButton("Submit");
    JButton clearButton = new JButton("Clear");


//      borderPanel.add(title, BorderLayout.NORTH);
//      gridPanel.add(title);

    // Name
    gridPanel.add(name);
    gridPanel.add(nameField);

    //Email
    gridPanel.add(email);
    gridPanel.add(emailField);

    // CreatePassword
    gridPanel.add(createPassword);
    gridPanel.add(passField);

    // Confirm Password
    gridPanel.add(confirmPassword);
    gridPanel.add(confirmPassField);

    // Gender
    gridGenderPanel.add(gender);
    gridGenderPanel.add(male);
    gridGenderPanel.add(female);
    gridPanel.add(gridGenderPanel);

    // Address
    gridPanel.add(address);
    gridPanel.add(addressField);

    // State
    gridPanel.add(state);
    gridPanel.add(stateBox);

    // Country
    gridPanel.add(country);
    gridPanel.add(countryField);

    //Button
    flowButton.add(submitButton);
    flowButton.add(clearButton);
    gridPanel.add(flowButton);

    mainFrame.add(gridPanel);   

    mainFrame.setSize(600, 700);
    mainFrame.setVisible(true);
    mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


}

}

Here is the result of the codes

enter image description here

I don't know where did I do wrong, please guide me.

I suggest you to use [Netbeans](https://netbeans.org/) for Layout Design as it is simple and easy to use via drag and drop you can simply design the layout.This is not a solution but an suggestion — Madhan, Jul 05 '15 at 18:01
Consider adding `FlowLayout` on your mainFrame. Without it it looks like your `gridPanel` is taking whole frame. Also there are some elements which you didn't even used like `phoneNo` label. — Pshemo, Jul 05 '15 at 18:02
It would appear that either `GridBagLayout` or `GroupLayout` would be better suited to this style of layout. The problem with `GridLayout` is that (by design) it will show the cells of the grid at the same width and height. — Andrew Thompson, Jul 05 '15 at 18:11

score 2 · Accepted Answer · answered Jul 05 '15 at 18:15

You have to add gender label to gridPanel not to gridGenderPanel

    // Gender
    //gridGenderPanel.add(gender);//The mistake
    gridPanel.add(gender);//add to main panel 
    gridGenderPanel.add(male);
    gridGenderPanel.add(female);
    gridPanel.add(gridGenderPanel);

score 0 · Answer 2 · answered Jul 05 '15 at 18:30

Grid layout has a bad habit of making every single part of the grid the same size as the biggest part of the grid. Making UI that require everything to be the same size - this works great. Try out using a GridBagLayout - it isn't pretty but it definitely works.

public class MainFrame {
    public static void main(String[] args) {
    // TODO Auto-generated method stub
    // Main Frame
    JFrame mainFrame = new JFrame("New Account Registration");

    JPanel borderPanel = new JPanel(new BorderLayout());
    JPanel gridPanel = new JPanel(new GridBagLayout());
    GridBagConstraints c = new GridBagConstraints();

    JPanel gridGenderPanel = new JPanel(new GridLayout(1, 2));
    JPanel flowButton = new JPanel(new FlowLayout());

    // JLabels
    JLabel title = new JLabel("New Account Registration");
    setSize(title);
    JLabel name = new JLabel("Name");
    setSize(name);
    JLabel email = new JLabel("Email Address:");
    setSize(email);
    JLabel createPassword = new JLabel("Create Password:");
    setSize(createPassword);
    JLabel confirmPassword = new JLabel("Confirm Password:");
    setSize(confirmPassword);
    JLabel gender = new JLabel("Gender:");
    setSize(gender);
    JLabel address = new JLabel("Address:");
    setSize(address);
    JLabel state = new JLabel("State:");
    setSize(state);
    JLabel country = new JLabel("Country:");
    setSize(country);
    JLabel phoneNo = new JLabel("Phone No:");

    String[] coutriesStrings = { "America", "Japan", "India", "Korea",
        "Sweden" };

    // JTextFields, JRadioButton, JComboBox
    JTextField nameField = new JTextField(15);
    JTextField emailField = new JTextField(15);
    JPasswordField passField = new JPasswordField(15);
    JPasswordField confirmPassField = new JPasswordField(15);
    JRadioButton male = new JRadioButton("Male");
    JRadioButton female = new JRadioButton("Female");
    ButtonGroup group = new ButtonGroup();
    group.add(male);
    group.add(female);
    JTextField addressField = new JTextField(15);
    JComboBox stateBox = new JComboBox(coutriesStrings);
    stateBox.setPreferredSize(new Dimension(200, 25));
    stateBox.setMinimumSize(new Dimension(200, 25));
    stateBox.setSelectedIndex(1);
    JTextField countryField = new JTextField(15);
    JTextField phoneField = new JTextField(15);

    JButton submitButton = new JButton("Submit");
    JButton clearButton = new JButton("Clear");

    // Name
    c.gridx = 0;
    c.gridy = 0;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(name, c);
    c.gridx = 2;
    c.gridy = 0;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(nameField, c);

    // Email
    c.gridx = 0;
    c.gridy = 1;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(email, c);
    c.gridx = 2;
    c.gridy = 1;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(emailField, c);

    // CreatePassword
    c.gridx = 0;
    c.gridy = 2;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(createPassword, c);
    c.gridx = 2;
    c.gridy = 2;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(passField, c);

    // Confirm Password
    c.gridx = 0;
    c.gridy = 3;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(confirmPassword, c);
    c.gridx = 2;
    c.gridy = 3;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(confirmPassField, c);

    // Gender
    c.gridx = 0;
    c.gridy = 4;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(gender,c );
    c.gridx = 2;
    c.gridy = 4;
    c.gridheight = 1;
    c.gridwidth = 1;
    gridPanel.add(male,c);
    c.gridx = 3;
    c.gridy = 4;
    c.gridheight = 1;
    c.gridwidth = 1;
    gridPanel.add(female,c);

    // Address
    c.gridx = 0;
    c.gridy = 5;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(address, c);
    c.gridx = 2;
    c.gridy = 5;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(addressField, c);

    // State
    c.gridx = 0;
    c.gridy = 6;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(state, c);
    c.gridx = 2;
    c.gridy = 6;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(stateBox, c);

    // Country
    c.gridx = 0;
    c.gridy = 7;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(country, c);
    c.gridx = 2;
    c.gridy = 7;
    c.gridheight = 1;
    c.gridwidth = 2;
    gridPanel.add(countryField, c);

    // Button
    flowButton.add(submitButton);
    flowButton.add(clearButton);
    c.gridx = 1;
    c.gridy = 8;
    c.gridheight = 1;
    c.gridwidth = 4;
    gridPanel.add(flowButton, c);

    mainFrame.add(gridPanel);

    mainFrame.setSize(350, 300);
    mainFrame.setVisible(true);
    mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    }

    private static void setSize(Component label) {
    label.setMinimumSize(new Dimension(120, 15));
    label.setPreferredSize(new Dimension(120, 15));
    }
}

It is at the very bottom of the code block, it just sets the JLabel sizes so they aren't as small as the word and you get the desired affect as in the photo you posted — skywavex, Jul 05 '15 at 19:19
`label.setMinimumSize(new Dimension(120, 15)); label.setPreferredSize(new Dimension(120, 15));` See [Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing?](http://stackoverflow.com/q/7229226/418556) (Yes.) — Andrew Thompson, Jul 05 '15 at 20:26

The alignment of Java Layout is messed up

2 Answers2