How to get this GUI layout right?

Question

I want to have this:

I tried this:

    // Vertically center
    formatbp.setLayout (new GridBagLayout()); // formatbp is a JPanel
    GridBagConstraints gbc = new GridBagConstraints();
    gbc.gridx = 0;
    gbc.gridy = GridBagConstraints.RELATIVE;

    rbpanel.setLayout(new BoxLayout(rbpanel, BoxLayout.PAGE_AXIS)); // rbpanel is also a JPanel
    rb = new ButtonGroup();
    rbpanel.add(new JLabel("Words are seperated by: "));

    rbLinesOrTabs.setSelected(true);
    rb.add(rbLinesOrTabs);
    rbpanel.add(rbLinesOrTabs);
    rbLinesOrTabs.addActionListener(this);

    rbotherpanel = new JPanel(new FlowLayout());
    rb.add(rbOther);
    rbpanel.add(rbOther);
    rbOther.addActionListener(this);

    othercharfield.setEnabled(false); // Is going to be enabled when rbOther gets selected (and disabled again when rbLinesOrTabs is selected again), that is where the actionlisteners are for
    rbotherpanel.add(othercharfield);

    rbpanel.add(rbotherpanel);

    formatbp.add(rbpanel,gbc);
    formatbp.add(formatb,gbc); // formatb is the button

(most objects where initialized earlier in the code)

But this is the result:

What am I doing wrong?

EDIT: I discovered I made a mistake here:

rbpanel.add(rbOther);

That should have been:

rbotherpanel.add(rbOther);

Now I get:

Better, but the Other item is not aligned right. (it's a bit to the right as you can see)

Answer 1

You are adding four things to rbPanel, which means you will get four rows (which is just like your screenshot example). The Other and textfield needs to be on the same row, so you should put them in their own panel, or use GridbagConstraints to position all the components correctly.

Use GridX and GridY instead of RELATIVE, as that makes the code easier to understand.

Answer 2

An all-in-one approach using MigLayout (yeah, it's really my current favourite :-)

    MigLayout layout = new MigLayout("debug", "[][]");
    JComponent content = new JPanel(layout);
    content.add(new JLabel("Words are separated by: "), "span");
    JRadioButton radio = new JRadioButton("Lines or tabs");
    content.add(radio, "wrap");
    // split the cell so it will contain both the other button
    // and the textfield
    content.add(new JRadioButton("Other:"), "split 2");
    // get the right margin of the upper radiobutton
    int rightMargin = radio.getInsets().right; 
    content.add(new JTextField(), "grow, wrap, " +
        // remove the gap to the preceding radiobutton
            "gapx 0, " +
        // set the padding to compensate the right edge
            "pad 0 0 0 -" + rightMargin + "px");
    content.add(new JButton("Format"), "span, center");
    showInFrame(content, "align to button text");

The visual outcome of the fine-tweaks in the shared cell is a bit LAF dependent. Looks good in Windows, not so good in Nimbus (the latter looks best without any compensation), so you would need to experiment a bit.

Answer 3

Try below code,

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

            @Override
            public void run()
            {
                JFrame frame = new JFrame();
                frame.setBounds(0, 0, 300, 300);
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


                JPanel formatbp = new JPanel(); 
                formatbp.setLayout (new GridBagLayout()); // formatbp is a JPanel
                GridBagConstraints gbc = new GridBagConstraints();
                gbc.gridx = 0;
                gbc.gridy = GridBagConstraints.RELATIVE;

                JPanel rbpanel = new JPanel();
                rbpanel.setLayout(new BoxLayout(rbpanel, BoxLayout.Y_AXIS)); // rbpanel is also a JPanel
                ButtonGroup rb = new ButtonGroup();
                rbpanel.add(new JLabel("Words are seperated by: "));

                JRadioButton rbLinesOrTabs = new JRadioButton("line or tabs");
                rbLinesOrTabs.setSelected(true);
                rb.add(rbLinesOrTabs);
                rbpanel.add(rbLinesOrTabs);
//                rbLinesOrTabs.addActionListener(this);
                JRadioButton rbOther = new JRadioButton("others:");
                JPanel rbotherpanel = new JPanel();
                rb.add(rbOther);
                rbotherpanel.add(rbOther);
//                rbOther.addActionListener(this);
                JTextField othercharfield = new JTextField("test", 4);
//                othercharfield.setColumns(800);
//                othercharfield.setEnabled(false); // Is going to be enabled when rbOther gets selected (and disabled again when rbLinesOrTabs is selected again), that is where the actionlisteners are for
                rbotherpanel.add(othercharfield);

                rbpanel.add(rbotherpanel);

                formatbp.add(rbpanel,gbc);
                JButton formatb = new JButton("format");
                formatbp.add(formatb,gbc); // formatb is the button
                frame.getContentPane().add(formatbp);
                frame.pack();
                frame.setVisible(true);                
            }
        });

    }