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!

The NetBeans IDE's GUI editor would be my approach. As all that code is not really interesting in comparison to the business logic. Also the properties and such are presented for trying. — Joop Eggen, Jul 01 '16 at 11:16
@JoopEggen I don't understand what you are trying to say....it's like when there is two things but you focus on one — David Trevor, Jul 01 '16 at 12:02
@taclight Sorry, but what do you mean? --- BranislavLazic: thanks for the suggestion, but I don't want to use extra .jar files for such small tasks. — OldMcDonald, Jul 01 '16 at 12:03
@taclight what I expressed maybe not that clear: a GUI editor helps with the layout(s), allows faster experimentation. The default layout manager of the NetBeans IDE makes GUI editing agreeable. (A bad GUI editor or hand coding on the other hand needs some learning experience.) — Joop Eggen, Jul 01 '16 at 12:22

explv · Answer 1 · 2016-07-01T15:15:01.213

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:

Add your text areas into scroll panes. – user1803551 Jul 01 '16 at 15:08 — user1803551, Jul 01 '16 at 15:08

Federico Iorio · Accepted Answer · 2016-07-01T23:12:41.403

Here is your code with just some little 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);  
     }  
}

score 4 · Answer 3 · answered Jul 01 '16 at 11:17

GridLayout sizes all cells the same, i.e. your outer layout with 3 rows and 1 column makes 3 cells of all the same size.

Instead, use BorderLayout for your outer container and add the top, mid and lower panels with constraints BorderLayout.NORTH, BorderLayout.CENTER and BorderLayout.SOUTH respectively

How do I create the following GUI in Java Swing?

3 Answers3

Linked