Place two JLabels above each other with JTextfields next to them

Question

I have this code:

button2.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                panel.add(label, BorderLayout.LINE_START);
                panel.add(label2, BorderLayout.LINE_START);
                panel.add(textfield, BorderLayout.LINE_END);
                panel.add(textfield2, BorderLayout.LINE_END);
                panel.add(button5);
                panel.revalidate();
                panel.repaint();
                label.setText("Geef de basis van de driehoek in cm: ");
                label2.setText("Geef de hoogte van de driehoek in cm: ");
            }
        });

Which corresponds with this screenshot:

I want it to actually look like this:

I'm new to Java and I know this is probably a dumb question, but I can't figure it out with information on the Internet.

Thanks in advance!

Answer 1

Looking at the code you provided then I see that the top three buttons are not added in this method so I suppose that they are already there:

In that case lets break your GUI down into bits, like so:

We can now make those three left over rechtangles. These rectangles are going to be JPanels each having the corresponding components in them:

So:

button2.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            //panel with label and textield
            JPanel base = new JPanel(new BorderLayout());
            base.add(label, Borderlayout.LINE_START);
            base.add(textfield, BorderLayout.LINE_END)
            panel.add(base, BorderLayout.PAGE_START);//top of the page this may interfere with your three buttons I don't know where you are in your layout structure

            //panel with label2 and textfield2
            JPanel height = new JPanel(new BorderLayout());
            height.add(label2, BorderLayout.LINE_START);
            height.add(textfield2, BorderLayout.LINE_END);
            panel.add(height, BorderLayout.CENTER);

            //button5 doesn't need a panel of it's own as it's only one component
            panel.add(button5, BorderLayout.PAGE_END);
            panel.revalidate();
            panel.repaint();
            label.setText("Geef de basis van de driehoek in cm: ");
            label2.setText("Geef de hoogte van de driehoek in cm: ");
        }
    });

And that should solve your problem, if you have any questions regarding the answer please let me know.

I hope this helps :)

EDIT #1:

Code version 2:

button2.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            JPanel content = new JPanel(new BorderLayout());
            //panel with label and textield
            JPanel base = new JPanel(new BorderLayout());
            base.add(label, Borderlayout.LINE_START);
            base.add(textfield, BorderLayout.LINE_END)
            content.add(base, BorderLayout.PAGE_START

            //panel with label2 and textfield2
            JPanel height = new JPanel(new BorderLayout());
            height.add(label2, BorderLayout.LINE_START);
            height.add(textfield2, BorderLayout.LINE_END);
            content.add(height, BorderLayout.CENTER);

            JPanel forbutton5 = new JPanel();
            forbutton5.add(button5);
            content.add(forbutton5, BorderLayout.PAGE_END);
            panel.add(content);
            panel.revalidate();
            panel.repaint();
            label.setText("Geef de basis van de driehoek in cm: ");
            label2.setText("Geef de hoogte van de driehoek in cm: ");
        }
    });

Answer 2

Adding to the answer of Roan: I am not sure what layout manager you are using. Panel has a FlowLayout as default layout manager, and that one puts all components on 1 line. I think you have to use a GridLayout,or a GridbagLayout, and then your components will appear one above the other

Answer 3

You are using BorderLayout for this you have to use GridBagLayout.

For More : https://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html

Answer 4

Check out the the visual guide to layout managers. What you're probably looking for is the GridBagLayout. The following might be something like what you want:

button2.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            panel.setLayout(new GridBagLayout()) // This should be set earlier
            GridBagConstraints c = new GridBagConstraints();
            c.gridx = 0;
            c.gridy = 1;
            panel.add(label, c);
            c.gridx = 0;
            c.gridy = 2;
            panel.add(label2, c);
            c.gridx = 1;
            c.gridy = 1;
            panel.add(textfield, c);
            c.gridx = 1;
            c.gridy = 2;
            panel.add(textfield2, c);
            c.gridx = 2;
            c.gridy = 1;
            panel.add(button5, c);
            panel.revalidate();
            panel.repaint();
            label.setText("Geef de basis van de driehoek in cm: ");
            label2.setText("Geef de hoogte van de driehoek in cm: ");
        }
    });