How do I create the following GUI in Java Swing?

Question

I want to create the following GUI with Java Swing.

Since I'm not experienced enough with Java Swing, I'm not sure how to exactly recreate that GUI.

I've tried using GridLayout which looks like this:

I've tried other LayoutManagers but due to my inexperience, I couldn't get anything even remotely resembling the GUI I want to achieve.

I probably have to use GridBagLayout but I've tried it and simply wasn't able to get anything done. I'm not sure how to exactly use GridBagLayout, especially since there is a variance of the amount of colums needed (2, 2 and then 3).

Here is the code used for creating the second GUI:

import java.awt.*;
import javax.swing.*;

public class GUITest extends JFrame {

public GUITest() {
    super("Testing Title");
    Container pane = getContentPane();

    pane.setLayout(new GridLayout(3,1));

    pane.add(getHeader());
    pane.add(getTextArea());
    pane.add(getButtonPanel());

}

public JComponent getHeader() {
    JPanel labelPanel = new JPanel();
    labelPanel.setLayout(new GridLayout(1,2));
    labelPanel.setSize(getPreferredSize());

    JLabel labelLocal = new JLabel("Left value: ", JLabel.CENTER);
    JLabel labelDB = new JLabel("Right value: ", JLabel.CENTER);

    labelPanel.add(labelLocal);
    labelPanel.add(labelDB);

    return labelPanel;
}

public JComponent getTextArea() {
    JPanel textPanel = new JPanel();
    textPanel.setLayout(new GridLayout(1,2,5,0));

    JTextArea testTextArea = new JTextArea();
    testTextArea.setEditable(false);
    JScrollPane sp1 = new JScrollPane(testTextArea); 

    JTextArea testTextArea2 = new JTextArea();
    JScrollPane sp2 = new JScrollPane(testTextArea2); 
    testTextArea2.setEditable(false);

    testTextArea.setText("Hello Hello Hello\nTesting!\ntesterino\ntesteroni");
    testTextArea2.setText("Hello Hello Hello\nTesting!\ntest\nABC123\ncdef123\nhijk123");

    textPanel.add(sp1);
    textPanel.add(sp2);
    return textPanel;
}

public JComponent getButtonPanel() {
    JPanel inner = new JPanel();
    inner.setLayout(new FlowLayout((FlowLayout.CENTER),0,100));
    inner.add(new JButton("Do something"));
    inner.add(new JButton("Do something different"));
    inner.add(new JButton("Do something even more different"));
    return inner;
}

public static void main(String[] args) {
    GUITest e = new GUITest();
    e.setSize(700, 500);
    e.setVisible(true);
    e.setResizable(false);
    e.setDefaultCloseOperation(EXIT_ON_CLOSE);
    e.setLocationRelativeTo(null);
}
}

I'm thankful for any kind of support!

Answer 1

You could try something like this:

import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.awt.*;

public class Example {

   public static void main(String[] args) {

       JFrame jFrame = new JFrame();
       jFrame.setTitle("Testing Title");
       jFrame.setLocationRelativeTo(null);

       JPanel mainPanel = new JPanel(new BorderLayout());
       mainPanel.setBorder(new EmptyBorder(5, 5, 5, 5));

       JPanel listPanel = new JPanel(new GridLayout(0, 2, 10, 0));

       JPanel leftListPanel = new JPanel(new BorderLayout(0, 10));
       JLabel leftLabel = new JLabel("Left value:");
       JTextArea leftTextArea = new JTextArea("Hello Hello Hello\nTesting!\ntest");
       JScrollPane leftScrollPane = new JScrollPane(leftTextArea);
       leftListPanel.add(leftLabel, BorderLayout.NORTH);
       leftListPanel.add(leftScrollPane, BorderLayout.CENTER);

       JPanel rightListPanel = new JPanel(new BorderLayout(0, 10));
       JLabel rightLabel = new JLabel("Right value:");
       JTextArea rightTextArea = new JTextArea("Hello Hello Hello\nTesting!\ntest");
       JScrollPane rightScrollPane = new JScrollPane(rightTextArea);
       rightListPanel.add(rightLabel, BorderLayout.NORTH);
       rightListPanel.add(rightScrollPane, BorderLayout.CENTER);

       listPanel.add(leftListPanel);
       listPanel.add(rightListPanel);
       mainPanel.add(listPanel, BorderLayout.CENTER);

       JPanel buttonsPanel = new JPanel(new BorderLayout());
       buttonsPanel.setBorder(new EmptyBorder(10, 10, 10, 10));
       buttonsPanel.add(new JButton("Do something"), BorderLayout.WEST);
       buttonsPanel.add(new JButton("Do something different"), BorderLayout.CENTER);
       buttonsPanel.add(new JButton("Do something even more different"), BorderLayout.EAST);
       mainPanel.add(buttonsPanel, BorderLayout.SOUTH);

       jFrame.setContentPane(mainPanel);
       jFrame.pack();
       jFrame.setVisible(true);
   }
}

Explanation:

Firstly I created a main JPanel with a BorderLayout. This JPanel will be split horizontally, the CENTRE component will be another JPanel containing the text areas and labels, and the SOUTH component will be a JPanel containing the buttons.

The JPanel that contains the text areas is given a GridLayout so that it can be easily split vertically, and is also given a hgap of 10 to add some spacing.

The left and right JPanels that are put into that are both the same. They have a BorderLayout with a vgap to add spacing. The NORTH component is a JLabel and the CENTRE component is a JScrollPane containing a JTextArea.

Finally, the SOUTH component of the main JPanel is another JPanel which is given a BorderLayout again. Three JButtons are added with WEST, CENTRE and EAST attributes allocated accordingly.

The overall result looks like: