Java Swing UI alignment issue

Question

I have a requirement as per which the UI should get displayed as below image.

I have tried achieving the same by using the below piece of code.

package com.samples;

import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

import javax.swing.JButton;
import javax.swing.JCheckBox;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.TitledBorder;


public class MyFrame extends JFrame {

    public MyFrame() {
    }

    public static void main(String[] args) {
        Runnable runner = new Runnable() {
            public void run() {
                JFrame frame = new JFrame("My Sample Frame");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setSize(1000, 800);
                frame.setVisible(true);

                JPanel jpOPanel = new JPanel();
                jpOPanel.setBorder(new CompoundBorder(new TitledBorder("Outer Panel"),
                                                      new EmptyBorder(0, 2, 2, 2)));
                GridBagLayout gbl = new GridBagLayout();
                GridBagConstraints gbc = new GridBagConstraints();
                jpOPanel.setLayout(gbl);

                JPanel jpSearch = new JPanel(new FlowLayout(FlowLayout.RIGHT));
                JButton jbSearch = new JButton("Search");
                jpSearch.add(jbSearch);
                gbc.weightx = 0.0D;
                gbc.weighty = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.fill = 1;
                gbc.gridwidth = 0;
                gbc.gridx = 0;
                gbc.gridy = 0;
                gbl.setConstraints(jpSearch, gbc);
                jpOPanel.add(jpSearch);

                JLabel jLabel1 = new JLabel("Input 1:");
                gbc.weightx = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 5);
                gbc.gridwidth = -1;
                gbc.gridx = 0;
                gbc.gridy = 1;
                gbl.setConstraints(jLabel1, gbc);
                jpOPanel.add(jLabel1);

                JComboBox jComboBox1 = new JComboBox();
                gbc.weightx = 1.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.gridwidth = 0;
                gbc.gridx = 1;
                gbc.gridy = 1;
                gbl.setConstraints(jComboBox1, gbc);
                jComboBox1.setVisible(true);
                jpOPanel.add(jComboBox1);

                JLabel jLabel2 = new JLabel("Input 2:");
                gbc.weightx = 0.0D;
                gbc.weighty = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 5);
                gbc.fill = 2;
                gbc.gridwidth = -1;
                gbc.gridx = 0;
                gbc.gridy = 2;
                gbl.setConstraints(jLabel2, gbc);
                jpOPanel.add(jLabel2);

                JComboBox jComboBox2 = new JComboBox();
                gbc.weightx = 1.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.gridwidth = 0;
                gbc.gridx = 1;
                gbc.gridy = 2;
                gbl.setConstraints(jComboBox2, gbc);
                jComboBox2.setVisible(true);
                jpOPanel.add(jComboBox2);

                JLabel jLabel3 = new JLabel("Input 3:");
                gbc.weightx = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 5);
                gbc.gridwidth = -1;
                gbc.gridx = 0;
                gbc.gridy = 3;
                gbl.setConstraints(jLabel3, gbc);
                jpOPanel.add(jLabel3);

                JComboBox jComboBox3 = new JComboBox();
                gbc.weightx = 1.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.gridwidth = 0;
                gbc.gridx = 1;
                gbc.gridy = 3;
                gbl.setConstraints(jComboBox3, gbc);
                jpOPanel.setVisible(true);
                jpOPanel.add(jComboBox3);

                JPanel jpPanel1 = new JPanel();
                jpPanel1.setBorder(new CompoundBorder(new TitledBorder(""), new EmptyBorder(0, 0, 0, 0)));
                GridBagConstraints gbc3 = new GridBagConstraints();
                gbc.gridwidth = 1;
                gbc.gridx = 0;
                gbc.gridy = 9;
                gbl.setConstraints(jpPanel1, gbc);

                JLabel jLabel4 = new JLabel("Input 4:");
                gbc3.insets = new Insets(0, 0, 0, 0);
                gbc3.gridx = 0;
                gbc3.gridy = 0;
                gbc3.gridwidth = -1;
                jpPanel1.add(jLabel4, gbc3);

                JTextField jTextField1 = new JTextField();
                jTextField1.setEditable(false);
                jTextField1.setPreferredSize(new Dimension(100, 20));
                jTextField1.setMinimumSize(new Dimension(100, 20));
                jTextField1.setMaximumSize(new Dimension(100, 20));
                gbc3.insets = new Insets(0, 0, 0, 0);
                gbc3.gridx = 1;
                gbc3.gridy = 0;
                gbc3.gridwidth = 0;
                jpPanel1.add(jTextField1, gbc3);

                JLabel jLabel5 = new JLabel("Input 5:");
                gbc3.insets = new Insets(0, 0, 0, 0);
                gbc3.gridx = 2;
                gbc3.gridy = 0;
                gbc3.gridwidth = -1;
                jpPanel1.add(jLabel5, gbc3);

                JTextField jTextField2 = new JTextField();
                jTextField2.setEditable(false);
                jTextField2.setPreferredSize(new Dimension(100, 20));
                jTextField2.setMinimumSize(new Dimension(100, 20));
                jTextField2.setMaximumSize(new Dimension(100, 20));
                gbc3.insets = new Insets(0, 0, 0, 0);
                gbc3.gridx = 3;
                gbc3.gridy = 0;
                gbc3.gridwidth = 0;
                jpPanel1.add(jTextField2, gbc3);
                jpOPanel.add(jpPanel1);

                JLabel jLabel6 = new JLabel("Input 6:");
                gbc.weightx = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 5);
                gbc.gridwidth = -1;
                gbc.gridx = 0;
                gbc.gridy = 15;
                gbl.setConstraints(jLabel6, gbc);
                jpOPanel.add(jLabel6);

                JComboBox jComboBox4 = new JComboBox();
                gbc.weightx = 1.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.gridwidth = 0;
                gbc.gridx = 1;
                gbc.gridy = 15;
                gbl.setConstraints(jComboBox4, gbc);
                jpOPanel.add(jComboBox4);

                JLabel jLabel7 = new JLabel("Input 7:");
                gbc.weightx = 0.0D;
                gbc.insets = new Insets(0, 0, 5, 5);
                gbc.gridwidth = -1;
                gbc.gridx = 0;
                gbc.gridy = 16;
                gbl.setConstraints(jLabel7, gbc);
                jpOPanel.add(jLabel7);

                JTextField jTextField3 = new JTextField();
                jTextField3.setEditable(false);
                gbc.weightx = 1.0D;
                gbc.insets = new Insets(0, 0, 5, 0);
                gbc.gridwidth = 0;
                gbc.gridx = 1;
                gbc.gridy = 16;
                gbl.setConstraints(jTextField3, gbc);
                jpOPanel.add(jTextField3);

                JPanel jpPanel3 = new JPanel();
                jpPanel3.setBorder(new CompoundBorder(new TitledBorder(""), new EmptyBorder(0, 0, 0, 0)));
                GridBagConstraints gbc2 = new GridBagConstraints();
                gbc.gridwidth = 2;
                gbc.gridx = 0;
                gbc.gridy = 24;
                gbl.setConstraints(jpPanel3, gbc);

                JCheckBox jCheckBox1 = new JCheckBox("Check Me");
                jCheckBox1.setPreferredSize(new Dimension(140, 20));
                jCheckBox1.setMinimumSize(new Dimension(140, 20));
                jCheckBox1.setMaximumSize(new Dimension(140, 20));
                gbc2.ipady = 0;
                gbc2.weightx = 0.5D;
                gbc2.weighty = 0.0D;
                gbc2.gridwidth = 1;
                gbc2.anchor = GridBagConstraints.LINE_START;
                gbc2.insets = new Insets(0, 0, 0, 0);
                gbc2.gridx = 0;
                gbc2.gridy = 0;
                jpPanel3.add(jCheckBox1, gbc2);

                JLabel jLabel8 = new JLabel("Input 8: ");
                jLabel8.setPreferredSize(new Dimension(140, 20));
                jLabel8.setMinimumSize(new Dimension(140, 20));
                jLabel8.setMaximumSize(new Dimension(140, 20));
                gbc2.ipady = 0;
                gbc2.weightx = 0.5D;
                gbc2.weighty = 0.0D;
                gbc2.anchor = GridBagConstraints.LINE_START;
                gbc2.insets = new Insets(0, 0, 0, 0);
                gbc2.gridx = 0;
                gbc2.gridy = 6;
                jpPanel3.add(jLabel8, gbc2);

                JComboBox jComboBox5 = new JComboBox();
                jComboBox5.setEnabled(false);
                jComboBox5.setPreferredSize(new Dimension(230, 20));
                jComboBox5.setMinimumSize(new Dimension(230, 20));
                jComboBox5.setMaximumSize(new Dimension(230, 20));
                gbc2.gridx = 3;
                gbc2.gridy = 6;
                jpPanel3.add(jComboBox5, gbc2);
                jpOPanel.add(jpPanel3);

                frame.add(jpOPanel);

            }
        };
        EventQueue.invokeLater(runner);
    }
}

But the components are getting displayed as shown in the image below. Please help on how to rectify the same.

`gbc.gridwidth = 2;` is what you want, I would suggest you start refactoring as well as it is a bit wall of codie. — BevynQ, Jul 19 '16 at 06:38
1) Provide ASCII art or a simple drawing of the *intended* layout of the GUI at minimum size, and if resizable, with more width and height. 2) 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 19 '16 at 07:53
@DanyalSandeelo Pointless question. You need to know how layouts work & can be combined, to the extent that you could code the GUI manually, before the GUI designers can be made to work for you. GUI designers are a productivity tool rather than a magic bullet. — Andrew Thompson, Jul 19 '16 at 07:55
@AndrewThompson I know one should know the core and basics but it would have helped him if he had opened the same project in netbeans, aligned the components and could see what's the generated code to get an idea of the fix. — Danyal Sandeelo, Jul 20 '16 at 06:37
@DanyalSandeelo If the OP does not understand the layouts, either they will not be able to *achieve* the layout required, or the layout code will be *fragile rubbish.* — Andrew Thompson, Jul 20 '16 at 10:34

score 5 · Accepted Answer · answered Jul 19 '16 at 06:51

5

Note: Please try to cut your code snippets down to make them easier readable for others.

Generally when using GridBagLayout you will have to use panels with a weight of 1 to fill out the spaces that you want empty. First, set gbc.fill = GridBagConstraints.BOTH;.

Then, add empty panels and use weights to fill out the space as you see in the image below. The panels above and below shall take all the place they get, so weighty = 1; and also span over two columns, so gridwidth = 2. The panels in the middle take the remaining height. The panel on the right side should then take the remaining width, so weightx = 1. Like this your panel will always take only the remaining space.

answered Jul 19 '16 at 06:51

maxdev

2,491
1
25
50

Thanks a ton. I guess there's a bit confusion. Actually those extra spaces will go off if those components align well. I want those components to come out as the expected result. The additional space (that you have highlighted in blue) are just coming because of the frame size. Please help me with how to align those components without those extra spaces between the label n it corresponding component – pankti Jul 19 '16 at 07:00
1

Ah okay. Your question is not clear about this. In this case, use a `weightx` of 0 for your labels (Input 1, 2, 3, 6, 7) and a `weightx` of 1 for the respective combo boxes. Then use `gridwidth = 2` for the panel that wraps your inputs 4 and 5 etc.. – maxdev Jul 19 '16 at 07:34
Thanks a lot. I did as suggested. All looks as expected except for the final panel still has all components aligned in one row. I want it to appear in 2 rows as shown in my expected UI pic – pankti Jul 19 '16 at 08:35
Also how can i get input 4 to the left corner of panel and align rest components accordingly – pankti Jul 19 '16 at 08:46
1

Did you also set `GridBagLayout` as the last panels layout? You must use `setLayout(new GridBagLayout())` for each component you want to use it in. When adding components to that subpanel, use values as if it was a completely independent panel (`gridx = 0` etc.). – maxdev Jul 19 '16 at 09:33
Yes @maxdev I have done the same but it's still not working as expected. You can refer my above code for same. – pankti Jul 19 '16 at 09:41
@pankti No, in your above code you do not do `jpPanel3.setLayout(new GridBagLayout())` – maxdev Jul 19 '16 at 12:40

score 2 · Answer 2 · answered Jul 19 '16 at 06:38

2

You could try adding a Box.createHorizontalGlue(), at the leftmost part, but you have to make sure that it has the greatest gridbagconstraints.weightx;

For example:

gbc.weightx = 1;//needs to be more than 0 so it works.
gbc.gridx = 4;//needs to be the largest gridx in the panel + 1
jpPanel3.add(Box.createHorizontalGlue(), gbc2);

answered Jul 19 '16 at 06:38

nick zoum

7,216
7
36
80

Thanks. I used this and the panel appears along with the right side components leaving the left column blank. But the inner components are all in same line and not one below the other. – pankti Jul 19 '16 at 08:07

Java Swing UI alignment issue

2 Answers2