Resizable panel sizes in simple JAVA swing window

Question

I have a Java swing app like the screenshot below:

I need that when changing the size of the window, the text field on the bottom right also changes its size. Now it's always the same size.

Layouts I used:

• 3 x BorderLayout (red) - one for the entire GUI, one each for the PAGE_START and PAGE_END constraints of the main GUI panel.

• In the panel used in the PAGE_START, 2 x FlowLayout (green), one in the LINE_START, the other in the LINE_END. (1)

• In the panel in the PAGE_END, 2 x GridLayout (blue), the first a 3 x 3, the other a single column.

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

public class MyJFrame extends JFrame {

    JPanel pan1 = new JPanel(); // top_left
    JPanel pan2 = new JPanel(); // top_right
    JPanel tPan = new JPanel(); // top
    JPanel pan4 = new JPanel(); // bottom_left
    JPanel pan5 = new JPanel(); // bottom_right
    JPanel bPan = new JPanel(); // bottom
    JPanel mPan = new JPanel(); // main

    JButton jButton1 = new JButton("FR");
    JButton jButton2 = new JButton("FG");
    JButton jButton3 = new JButton("FB");
    JButton jButton4 = new JButton("A");
    JButton jButton5 = new JButton("B");
    JButton jButton6 = new JButton("C");

    JTextArea textArea = new JTextArea();

    public MyJFrame(){

        setTitle("Simple Swing App");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        textArea.setFont(new Font("Ubuntu Mono", Font.PLAIN, 22));
        textArea.setEnabled(false);
        textArea.setText(" Obszar tekstowy typu jTextArea\n\n");
        textArea.setDisabledTextColor(Color.RED);

        JScrollPane scrollPane = new JScrollPane(textArea);

        jButton1.setBackground(Color.red);
        jButton2.setBackground(Color.green);
        jButton3.setBackground(Color.blue);

        jButton1.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.red);
                mPan.updateUI();
            }
        });
        jButton2.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.green);
                mPan.updateUI();
            }
        });
        jButton3.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textArea.setDisabledTextColor(Color.blue);
                mPan.updateUI();
            }
        });

        pan1.setLayout(new FlowLayout());
        pan2.setLayout(new FlowLayout());
        tPan.setLayout(new BorderLayout());
        pan4.setLayout(new GridLayout(3,3,2,2));
        pan5.setLayout(new GridLayout(3,1,0,2));
        bPan.setLayout(new BorderLayout());
        mPan.setLayout(new BorderLayout(2,2));

        bPan.setBorder(BorderFactory.createEmptyBorder(4,4,4,4));

        for (int i=1; i<10; i++) {
            JButton jButton = new JButton(i+"");
            pan4.add(jButton);
        }

        for (int i=1; i<4; i++){
            JTextField jTextField = new JTextField(" Pole tekstowe " + i + " typu jTextField ");
            jTextField.setBackground(Color.WHITE);
            jTextField.setBorder(BorderFactory.createLineBorder(Color.CYAN));
            jTextField.addKeyListener(new KeyAdapter() {
                @Override
                public void keyReleased(KeyEvent e) {
                    if (e.getKeyCode() == KeyEvent.VK_ENTER){
                        textArea.append(jTextField.getText() + "\n\n");
                        mPan.updateUI();
                    }
                }
            });
            pan5.add(jTextField);
        }

        pan1.add(jButton1);
        pan1.add(jButton2);
        pan1.add(jButton3);

        pan2.add(jButton4);
        pan2.add(jButton5);
        pan2.add(jButton6);

        tPan.add(pan1, BorderLayout.LINE_START);
        tPan.add(pan2, BorderLayout.LINE_END);

        bPan.add(pan4, BorderLayout.WEST);
        bPan.add(pan5, BorderLayout.EAST);

        mPan.add(tPan, BorderLayout.PAGE_START);
        mPan.add(scrollPane);
        mPan.add(bPan, BorderLayout.PAGE_END);

        add(mPan);
        setResizable(true);
        setSize(600,400);
        setLocationRelativeTo(null);
        setVisible(true);
    }
}

Answer 1

The trick to solving this is in understanding how BorderLayout assigns extra space to the areas within it. For example, let's say this is the initial size.

We can ignore the green areas, not relevant in the GUI in the question. But focus on the red / blue areas in the middle 'row'.

As the user drags the GUI larger, the red areas (LINE_START & LINE_END) will be assigned any extra height available, while the blue are will receive any extra height or width.

The GUI puts the text fields in the LINE_END. To have them gain any extra width, they need to be in the CENTER.

But wait, now the text fields will not be given any 'white space' between the first red area and the blue area in the center. There are various ways to fix this:

1. Assign extra horizontal space to the border layout when it is constructed. Something like new BorderLayout(0, 100).
2. Add an EmptyBorder to either the LINE_START or CENTER component. For the center component, it might look like this new EmptyBorder(0,100,0,0).

I would use the second, but either should create the effect needed.