How to make a Java GridBagLayout with six rows and 2 columns

Question

I'm tired with Java GridBagLayout. I want to create a panel that looks like the one shown in the picture below, but I couldn't get it. I'm unable to position the left panel, and I failed to make panels long. The width does not increase when I set gridWidth. I can't use any GUI builders for that. I want to get a layout like the picture below.

This is the unsuccessful code:

public class gui3 extends Frame{
    Panel p1,p2,p3,p4,p5,p6,p7,pmain;
    gui3(){

    setVisible(true);
    setSize(500,500);
    setTitle(" Calculator ");


        GridBagLayout gb1=new GridBagLayout();
        GridBagConstraints gbc=new GridBagConstraints();
        setLayout(gb1);

        p1=new Panel();
        p1.setBackground(Color.BLACK);
        gbc.gridx=5;
        gbc.gridy=0;
        gbc.gridwidth=3;
        //gbc.weightx =0.5;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p1,gbc);

        p2=new Panel();
        p2.setBackground(Color.BLUE);
        gbc.gridx=0;
        gbc.gridy=1;
        gbc.gridwidth=2;
       // gbc.weightx = 1;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p2,gbc);

        p3=new Panel();
        p3.setBackground(Color.GREEN);
        gbc.gridx=0;
        gbc.gridy=2;
        gbc.gridwidth=2;
      //  gbc.weightx = 1;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p3,gbc);

        p4=new Panel();
        p4.setBackground(Color.cyan);
        gbc.gridx=0;
        gbc.gridy=3;
        gbc.gridwidth=2;
      //  gbc.weightx = 1;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p4,gbc);

        p5=new Panel();
        p5.setBackground(Color.RED);
        gbc.gridx=0;
        gbc.gridy=4;
        gbc.gridwidth=2;
     //   gbc.weightx = 1;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p5,gbc);

        p6=new Panel();
        p6.setBackground(Color.pink);
        gbc.gridx=0;
        gbc.gridy=5;
        gbc.gridwidth=2;
       // gbc.weightx = 1;
       // gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p6,gbc);

        p7=new Panel();
        p7.setBackground(Color.yellow);
        gbc.gridx=6;
        gbc.gridy=0;
        gbc.gridheight=6;
     //   gbc.weightx = 1;
        gbc.fill=GridBagConstraints.HORIZONTAL;
        add(p7,gbc);


    }

}

Answer 1

The abrupt changes in size from the MadProgrammer's solution can be easily fixed in two ways:

public JPanel createPane(Color color) {
    JPanel pane = new JPanel(){ 

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(50, 50);
        }

        @Override
        public Dimension getMinimumSize() {
            return new Dimension(50, 50);
        }            

    };
    pane.setBackground(color);
    return pane;
}

We also provide a mimimum size which is equal to the preferred size. This way the panels are not shrinking but they are cut from the window when the container is too small to display them.

The optimal solution is probably to set the weighty to 1. The panels will gradually being shrinking.

gbc.weightx = 1;
gbc.weighty = 1;
gbc.gridy = 0;

Finally, I also created a solution with MigLayout. If possible, try to create your layouts with MigLayout rather than with GridBagLayout.

package com.zetcode;

import java.awt.Dimension;
import java.awt.EventQueue;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JPanel;
import net.miginfocom.swing.MigLayout;


public class MigLayoutPanels extends JFrame {

    public MigLayoutPanels() {

        initUI();

        setTitle("Panels");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }

    private void initUI() {

        setLayout(new MigLayout("wrap"));

        add(createPanel(), "w 200, push, grow");
        add(createPanel(), "push, grow");
        add(createPanel(), "push, grow");
        add(createPanel(), "push, grow");
        add(createPanel(), "push, grow");
        add(createPanel(), "push, grow");

        add(createPanel(), "cell 1 0 1 6, growy");


        pack();
    }

   public JPanel createPanel() {
        JPanel pnl = new JPanel(){ 

            @Override
            public Dimension getPreferredSize() {
                return new Dimension(50, 50);
            }

        };

        pnl.setBorder(BorderFactory.createEtchedBorder());
        return pnl;
    }    

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                MigLayoutPanels ex = new MigLayoutPanels();
                ex.setVisible(true);
            }
        });
    }
}

GridBagLayout is a powerful manager which can be used to create most layouts. Many programmers find it difficult to use. MigLayout is easier to understand, more powerful, and much less verbose.

Answer 2

You mean something like...

So basically, you can use GridBagConstraints#gridheight (or gridwidth) to set the number of grid cells that a component will span across

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestLayout {

    public static void main(String[] args) {
        new TestLayout();
    }

    public TestLayout() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new GridBagLayout());

                GridBagConstraints gbc = new GridBagConstraints();
                gbc.insets = new Insets(4, 4, 4, 4);
                gbc.gridx = 0;
                gbc.weightx = 1;
                gbc.gridy = 0;
                gbc.fill = GridBagConstraints.HORIZONTAL;
                frame.add(createPane(Color.RED), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.GREEN), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.BLUE), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.CYAN), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.MAGENTA), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.ORANGE), gbc);
                gbc.gridy++;
                frame.add(createPane(Color.PINK), gbc);

                gbc.gridx++;
                gbc.weightx = 0;
                gbc.gridy = 0;
                gbc.weighty = 1;
                gbc.gridheight = GridBagConstraints.REMAINDER;
                gbc.fill = GridBagConstraints.VERTICAL;
                frame.add(createPane(Color.YELLOW), gbc);

                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public JPanel createPane(Color color) {
        JPanel pane = new JPanel(){ 

            @Override
            public Dimension getPreferredSize() {
                return new Dimension(50, 50);
            }

        };
        pane.setBackground(color);
        return pane;
    }

}

Have a look at How to Use GridBagLayout for more details