How to 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 accurately recreate this GUI.

I tried using a GridLayout that looks like this:

I tried other LayoutManagers, but due to my inexperience I could not get anything even remotely resembling the GUI that I want to achieve.

I probably have to use GridBagLayout, but I tried it and just couldn't do anything. I'm not sure how to use the GridBagLayout exactly, especially since there is a difference in the number of quantities needed (2, 2, and 3).

Here is the code used to create 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 am grateful for any support!

Answer 1

Here is your code with a few changes :)

  import java.awt.*; import javax.swing.*; public class GUITest extends JFrame { public GUITest() { super("Testing Title"); Container pane = getContentPane(); pane.setLayout(new BorderLayout());//Modified Layout to BorderLayout pane.add(getHeader(),BorderLayout.NORTH); //BorderLayout.NORTH pane.add(getTextArea(),BorderLayout.CENTER);//BorderLayout.CENTER pane.add(getButtonPanel(),BorderLayout.SOUTH);//BorderLayout.SOUTH } 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());//Modified to standard FlowLayout 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.pack(); //Modified setSize(700,500) to pack() e.setVisible(true); e.setResizable(false); e.setDefaultCloseOperation(EXIT_ON_CLOSE); e.setLocationRelativeTo(null); } } 

Answer 2

You can 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:

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

JPanel , which contains the text areas, is assigned to GridLayout , so you can easily split it vertically and also specify hgap of 10 to add some spacing.

The left and right JPanels that fit into them are the same. They have a BorderLayout with 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 that is again given a BorderLayout . Three JButton are added with the corresponding attributes WEST , CENTRE and EAST .

The overall result is as follows:

Answer 3

GridLayout determines the sizes of all cells in the same way, i.e. Appearance with 3 rows and 1 column makes 3 cells of the same size.

Instead, use BorderLayout for the external container and add the top, middle, and bottom panels with the restrictions BorderLayout.NORTH, BorderLayout.CENTER, and BorderLayout.SOUTH respectively