How can I create the following layout in Swing?

Question

I am new to Swing and I don't understand how to do layouts properly. I need to create the following layout

I have tried to use a grid layout and a border layout but I just can't get it to look the way I designed it in the picture. Can anyone help me?

Attempt

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

class Test extends JFrame
{
    public Test()
    {

        //Make a content frame
        Container contentPane = getContentPane();
        Container contentPane2 = getContentPane();
        Container contentPane3 = getContentPane();

        //Create a grid layout - This will go to the left
        contentPane.setLayout ( new GridLayout ( 4, 1 ) );  //4 Rows and 1 Columns
            //Button 1
            contentPane.add ( new JButton ( "Button 1" ) );
            //Button 2
            contentPane.add ( new JButton ( "Button 2" ) );
            //Button 3
            contentPane.add ( new JButton ( "Button 3" ) );
            //Button 4
            contentPane.add ( new JButton ( "Button 4" ) );

        //Create a border layout - This will go in the middle.
        contentPane2.setLayout ( new BorderLayout() );
            //Label - Welcome to my application
            contentPane2.add ( new JLabel ( "Welcome to my application" ) );
            //Image 1
            contentPane2.add  ( new ImageIcon("img/button.png" ) );
            //Change background colour

        //Create a grid layout - This will go to the right
        contentPane3.setLayout ( new GridLayout ( 4, 1 ) ); //4 Rows and 1 Columns
            //Button 5
            contentPane3.add ( new JButton ( "Button 5" ) );
            //Button 6
            contentPane3.add ( new JButton ( "Button 6" ) );
            //Button 7
            contentPane3.add ( new JButton ( "Button 7" ) );
            //Button 8
            contentPane3.add ( new JButton ( "Button 8" ) );


        //Set window parameters
        setTitle ( "Test Application" );
        setSize ( 200, 200 );
        setVisible ( true );
    }

    public static void main ( String[] args )
    {

        Test myFrame = new Test();

    }//End main


}//End Class

@ JB Nizet okay here is my attempt, to be honest I have noooo idea what I am doing ;( — Ninja2k, Oct 22 '17 at 12:49
Then you shouldn't ask a question. Instead, you should read documentation: https://docs.oracle.com/javase/tutorial/uiswing/layout/grid.html, https://docs.oracle.com/javase/tutorial/uiswing/layout/border.html. Note that you can use several layouts. For example, use a grid layout for a panel containing the first 4 buttons, same for the last 4 buttons, and a border layout for the two button panels and for the image on the center. — JB Nizet, Oct 22 '17 at 12:53
JB Nizet I already have, I can create those basic layouts but I cannot create the layout I want. — Ninja2k, Oct 22 '17 at 12:54
What you posted shows that you haven't: you're using a single grid layout, and if you had read the documentation correctly, you would realize immediately that it can't possibly work. Read the documentation again, carefully, and read my previous comment. — JB Nizet, Oct 22 '17 at 12:56
@JB Nizet I only gave you my attempt at a grid layout not a border layout, I did not know you could use both together. — Ninja2k, Oct 22 '17 at 13:00
*"I did not know you could use both together."* Combining layouts is something that I do **not** think is well explained in the tutorial. See this example of [combinations of layout managers](http://stackoverflow.com/a/5630271/418556) for some tips. Also have a look at using layout padding and borders for [white space](http://stackoverflow.com/a/17874718/418556), for a less 'crowded' GUI as seen in the image. — Andrew Thompson, Oct 22 '17 at 14:17

score 2 · Accepted Answer · answered Oct 22 '17 at 16:44

Please read comments :

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

class Test extends JFrame{

    //when posting code make resources available
    URL url = new URL("http://www.digitalphotoartistry.com/rose1.jpg");

    public Test() throws IOException  {

        //You clearly have three different areas in your design, so start by making:
        JPanel left = new JPanel();
        JPanel center = new JPanel();
        JPanel right = new JPanel();

        //left and right panels holds 4 buttons each. GridLayout will make
        //them occupy equal space. You could also use other layout managers like
        //Box
        left.setLayout ( new GridLayout ( 4, 1 ) );  //4 Rows and 1 Columns
        //Button 1
        left.add ( new JButton ( "Button 1" ) );
        //Button 2
        left.add ( new JButton ( "Button 2" ) );
        //Button 3
        left.add ( new JButton ( "Button 3" ) );
        //Button 4
        left.add ( new JButton ( "Button 4" ) );

        //Create a border layout - This will go in the middle.
        center.setLayout ( new BorderLayout() );
        //Label - Welcome to my application
        center.add ( new JLabel ( "Welcome to my application"),BorderLayout.NORTH);
        //Image 1
        ImageIcon icon= new ImageIcon(ImageIO.read(url));
        center.add ( new JLabel(icon), BorderLayout.CENTER);

        //Create a grid layout - This will go to the right
        right.setLayout ( new GridLayout ( 4, 1 ) ); //4 Rows and 1 Columns
        //Button 5
        right.add ( new JButton ( "Button 5" ) );
        //Button 6
        right.add ( new JButton ( "Button 6" ) );
        //Button 7
        right.add ( new JButton ( "Button 7" ) );
        //Button 8
        right.add ( new JButton ( "Button 8" ) );

        //add JPanel to content pane which uses Borderlayout by default
        getContentPane().add(left, BorderLayout.WEST);
        getContentPane().add(center, BorderLayout.CENTER);
        getContentPane().add(right, BorderLayout.EAST);

        //Set window parameters
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle ( "Test Application" );
        //setSize ( 200, 200 ); //size set by layout
        pack();
        setVisible ( true );
    }

    public static void main ( String[] args ) throws IOException   {
        new Test();
    }//End main
}//End Class

Sorry for such a basic question, I see you use Jpanel() and I am using container(), what is the difference between the two? — Ninja2k, Oct 23 '17 at 11:46
`JPanel` is a subclass of `Container` see https://stackoverflow.com/questions/23030636/what-is-the-difference-between-container-and-panel (Actually you use one container. All your containers `= getContentPane();`) — c0der, Oct 23 '17 at 13:14
That worked fine for me, I made some changes to the code to load a local image file and just changed a few items, I am trying to find a GUI builder that might help me learn this a little better. Thanks for the help. — Ninja2k, Oct 26 '17 at 14:12
*"I am trying to find a GUI builder that might help me learn this a little better."* To use a GUI builder properly, you first need to understand how to create the GUI using plain old Java code. A GUI builder won't either teach, or help, to understand that. — Andrew Thompson, Oct 26 '17 at 17:30
Netbeans has a good swing GUI builder. Better use manual coding to learn, as @AndrewThompson suggested. — c0der, Oct 26 '17 at 17:42

How can I create the following layout in Swing?

1 Answers1