Java GUI alignment

Question

So I have my labels and everything added, but I am still having trouble formatting and aligning everything. The calculate button should obviously be centered. I get that using gridbag splits the frame into coordinate system and when one column is larger than the others it will adjust the others and will throw it off(Right?). But I can't understand how to even fix this. And still having trouble aligning everything to the left so it doesn't start towards the center.

When compiled heres the window

Have

Here's what I am trying to get it like, I haven't added everything yet.

Want

 JPanel p = new JPanel(new GridBagLayout());


GridBagConstraints gc = new GridBagConstraints();

//0 Column
    gc.gridx = 0;
    gc.gridy = 0;
    gc.anchor = GridBagConstraints.EAST;
    p.add(new JLabel("Mortgage amount:"),gc);


    gc.gridx = 0;
    gc.gridy =1;
    p.add(new JLabel("Mortgage term:"),gc);



    gc.gridx = 0;
    gc.gridy = 2;
    p.add(new JLabel("Interest rate:"),gc);

    gc.gridx = 0;
    gc.gridy = 3;
    p.add(new JLabel("Mortgage start date:"),gc);

    gc.gridx = 0;
    gc.gridy= 4;
    p.add(new JLabel("Monthly Payments:"),gc);

    gc.gridx = 0;
    gc.gridy = 7;
    p.add(new JLabel("Extra payments"),gc);

    gc.gridx = 0;
    gc.gridy = 8;
    p.add(new JLabel("Adding: "),gc);

    gc.gridx = 0;
    gc.gridy = 9;
    p.add(new JLabel("Adding: "),gc);

    gc.gridx = 0;
    gc.gridy = 10;
    p.add(new JLabel("Adding: "),gc);

    gc.gridx = 0;
    gc.gridy = 11;
    p.add(new JLabel("Changes paid off date to:"),gc);


    //1 Column
    gc.gridx = 1;
    gc.gridy = 0;
    p.add(new JLabel("$"),gc);

    gc.gridx = 1;
    gc.gridy = 4;
    p.add(new JLabel("$"),gc);

    gc.gridx = 1;
    gc.gridy = 8;
    p.add(new JLabel("$"),gc);

    gc.gridx = 1;
    gc.gridy = 9;
    p.add(new JLabel("$"),gc);

    gc.gridx = 1;
    gc.gridy = 10;
    p.add(new JLabel("$"),gc);

    //2 column
    gc.gridx = 2;
    gc.gridy = 0;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy =1;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy = 2;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy = 3;
    p.add(new JComboBox(month),gc);

    gc.gridx= 2;
    gc.gridy = 4;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy = 8;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy = 9;
    p.add(new JTextField(8),gc);

    gc.gridx = 2;
    gc.gridy = 10;
    p.add(new JTextField(8),gc);

    //3 column
    gc.gridx = 3;
    gc.gridy = 1;
    p.add(new JLabel(" years or "),gc);

    gc.gridx = 3;
    gc.gridy = 2;
    p.add(new JLabel(" % per year"),gc);

    gc.gridx = 3;
    gc.gridy = 3;
    p.add(new JComboBox(days),gc);

    gc.gridx = 3;
    gc.gridy = 8;
    p.add(new JLabel("to your monthly mortgage payment"),gc);

    gc.gridx = 3;
    gc.gridy = 9;
    p.add(new JLabel("as an extra yearly mortgage payment every "),gc);

    gc.gridx = 3;
    gc.gridy = 10;
    p.add(new JLabel("as a one-time payment in "),gc);


    //4 column
    gc.gridx = 4;
    gc.gridy = 1;
    p.add(new JTextField(8),gc);

    gc.gridx = 4;
    gc.gridy=3;
    p.add(new JComboBox(years),gc);



    //5 column
    gc.gridx = 5;
    gc.gridy = 1;
    p.add(new JLabel(" months"),gc);

    gc.gridy=5;
    gc.anchor = GridBagConstraints.CENTER;
    p.add(new JButton("Calculate"),gc);


    add(p, BorderLayout.NORTH);





    }



}

1) For better help sooner, post an [MCVE](http://stackoverflow.com/help/mcve) (Minimal Complete Verifiable Example) or [SSCCE](http://www.sscce.org/) (Short, Self Contained, Correct Example). 2) Provide ASCII art or a simple drawing of the layout of the GUI at minimum size, and if resizable, with more width and height. — Andrew Thompson, Apr 20 '15 at 23:08
Honestly, consider using [MigLayout](http://www.miglayout.com/). It's much better and easier than the default Swing layouts. — Steffen, Apr 20 '15 at 23:40
Use two separate panels, one the the fields at the top, one for the fields at the bottom. This is commonly known as compound layouts, where you use multiple containers and layouts to achieve the results you are after — MadProgrammer, Apr 20 '15 at 23:56

score 0 · Answer 1 · answered Apr 22 '15 at 13:59

Since you didn't specify a resizing behavior, many layout managers could be used to get very similar results. As mentioned by @MadProgrammer, 2 panels are probably a good approach, where for the top one I used GridBagLayout for educational purpose and the bottom one I left empty for you to implement yourself, although that one will not benefit from GridBagLayout and a simpler layout manager can be used (such as BoxLayout).

public class Mort extends JFrame {

    public static void main(String[] args) {

        new Mort();
    }

    Mort() {

        JPanel topPanel = new JPanel(new GridBagLayout());
        GridBagConstraints gc = new GridBagConstraints();
        JPanel tempPanel;

        gc.anchor = GridBagConstraints.LINE_START;

        // Top
        // 0 Column
        gc.gridx = 0;

        gc.gridy = 0;
        topPanel.add(new JLabel("Mortgage amount:"), gc);

        gc.gridy = 1;
        topPanel.add(new JLabel("Mortgage term:"), gc);

        gc.gridy = 2;
        topPanel.add(new JLabel("Interest rate:"), gc);

        gc.gridy = 3;
        topPanel.add(new JLabel("Mortgage start date:"), gc);

        gc.gridy = 4;
        topPanel.add(new JLabel("Monthly Payments:"), gc);

        gc.gridy = 5;
        gc.gridwidth = GridBagConstraints.REMAINDER;
        gc.anchor = GridBagConstraints.CENTER;
        topPanel.add(new JButton("Calculate"), gc);

        gc.gridwidth = 1;
        gc.anchor = GridBagConstraints.LINE_START;

        // 1 Column
        gc.gridx = 1;

        gc.gridy = 0;
        tempPanel = new JPanel();
        tempPanel.add(new JLabel("$"));
        tempPanel.add(new JTextField(8));
        topPanel.add(tempPanel, gc);

        gc.gridy = 1;
        tempPanel = new JPanel();
        tempPanel.add(new JTextField(8));
        tempPanel.add(new JLabel("years of"));
        tempPanel.add(new JTextField(8));
        tempPanel.add(new JLabel("months"));
        topPanel.add(tempPanel, gc);

        gc.gridy = 2;
        tempPanel = new JPanel();
        tempPanel.add(new JTextField(8));
        tempPanel.add(new JLabel("% per year"));
        topPanel.add(tempPanel, gc);

        gc.gridy = 3;
        tempPanel = new JPanel();
        tempPanel.add(new JComboBox());
        tempPanel.add(new JComboBox());
        tempPanel.add(new JComboBox());
        topPanel.add(tempPanel, gc);

        gc.gridy = 4;
        tempPanel = new JPanel();
        tempPanel.add(new JLabel("$"));
        tempPanel.add(new JTextField(8));
        topPanel.add(tempPanel, gc);

        // Bottom
        JPanel bottomPanel = new JPanel();
        bottomPanel.add(new JLabel("BottomPanel"));

        // Main
        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new BoxLayout(mainPanel, BoxLayout.Y_AXIS));
        mainPanel.add(new JLabel("Mortgage Calculator"));
        mainPanel.add(new JSeparator());
        mainPanel.add(topPanel);
        mainPanel.add(new JSeparator());
        mainPanel.add(bottomPanel);

        getContentPane().add(mainPanel);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        pack();
        setVisible(true);
    }
}

enter image description here

To answer your specific qualms:

You were missing the line gc.anchor = GridBagConstraints.LINE_START; which aligns everything to the left as you wanted.
There is no point in more than 2 columns because there are only 2 places which need to be aligned vertically.
The "Calculate" button stands outside of the columns alignment (it is centered through both columns). The line gc.gridwidth = GridBagConstraints.REMAINDER; means that it should span (fill) the rest of the columns to its right and the line gc.anchor = GridBagConstraints.CENTER; aligns it to the center.

I leave all the visuals (colors, fonts, paddings, insets etc.) to you.

Java GUI alignment

1 Answers1