How to arrange components using BorderLayout?

Question

I'm trying to get my GUI to appear as such:

Grocery Cart [Refill]
    (TextArea)

I am currently using BorderLayout and I would like to stick with it. How can I get the text area underneath the JLabel and the JButton whilst being in the same JPanel? Here is my code for the specific area:

How do I add the text box underneath the two side by side? Whenever I add it, it just goes next to them.

JPanel newPanel = new JPanel();

JLabel label = new JLabel("Grocery Cart");
label.setFont(new Font("Arial", Font.BOLD, 20));
newPanel.add(label);
contentPane.add(newPanel, BorderLayout.WEST)        ;
JButton btnNewButton = new JButton("Refill");
btnNewButton.setFont(new Font("Tahoma", Font.PLAIN, 20));
btnNewButton.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent arg0) {
    }
});
newPanel.add(btnNewButton);

The answer to layout issues like this is always to nest panels inside panels. — David Conrad, Mar 20 '18 at 20:53
ATrubka's answer below and David's comment above are exactly correct in this case. `BorderLayout` expects you to put all of your components into a `JPanel`, then add them to areas of the BorderLayout like WEST and NORTH. BorderLayout does not work well with using individual components that aren't nested inside panels. — markspace, Mar 20 '18 at 21:17
In many other cases however, not using a layout directly but instead using GUI layout tool is the correct answer. https://netbeans.org/features/java/swing.html — markspace, Mar 20 '18 at 21:19

ATrubka · Answer 1 · 2018-03-20T21:19:33.053

If my understanding is correct, here's what you need to do:

    JPanel mainPanel = new JPanel(new BorderLayout());
    JPanel eastPanel = new JPanel(new BorderLayout());
    JTextArea area = new JTextArea("Test content");
    JLabel label = new JLabel("Grocery Cart");
    label.setFont(new Font("Arial", Font.BOLD, 20));

    mainPanel.add(label, BorderLayout.WEST);

    JButton btnNewButton = new JButton("Refill");
    btnNewButton.setFont(new Font("Tahoma", Font.PLAIN, 20));
    btnNewButton.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent arg0) {
        }
    });

    eastPanel.add(btnNewButton, BorderLayout.WEST);
    eastPanel.add(area, BorderLayout.CENTER);

    mainPanel.add(eastPanel, BorderLayout.CENTER);

    contentPane.add(mainPanel, BorderLayout.NORTH);

The main idea is that in order to construct complex layouts with simple layout types such as border and flow, you have to use container hierarchy and get creative with a combination of flow and border layouts.

In my example the label and button aren't resizable and always have their widths equal to their preferred widths. The text area, however is resizable and takes up its container's remaining width.

Note, that all components added to mainPanel are resizable vertically. In order to keep mainPanel to its preferred height you place it to the contentPane's BorderLayout.NORTH or SOUTH for that matter.

How to arrange components using BorderLayout?

1 Answers1