How can I implement Flowlayout in java to make it so that my GridLayout can have a different sized button?

Question

I programmed a calculator in java using a GridLayout method. I did not consider the fact that it would not make it possible to set different sized buttons. Therefore I am trying to find a work around instead since I could not figure out how to implement GridBagLayout into my code as it is.

Currently the result of my code looks like this: My current JFrame Design

However, I am trying to get it to look like this: How I want the design to look

   public static void main(String[] args){

   JFrame frame = new JFrame("Calculator");
   Container content = frame.getContentPane();
   ActionListener AL = new Calculator();
   content.setLayout((new BorderLayout()));

   JPanel panel1 = new JPanel(new BorderLayout());
   panel1.add(new JLabel("CSC 20 Lab 08", JLabel.CENTER), BorderLayout.NORTH);

   text = new JTextField("0.");
   text.addActionListener(AL);

   panel1.add( text, BorderLayout.SOUTH);
   text.setHorizontalAlignment(JTextField.RIGHT);
   content.add(panel1, BorderLayout.NORTH);
   JPanel panel2 = new JPanel(new GridLayout(4, 5));

   for (int i=1; i < 8; i = i + 3){

       ...adding numerical button in panel2...

       ...adding more buttons in panel2...
   }

   JPanel panel2b = new JPanel(new GridLayout(1, 2));

   clearButton = new JButton("C");
   panel2b.add(clearButton);
   gridbag.setConstraints(clearButton, c);

  ...add "clear" functionality...

   panel2.add(panel2b);

   ...adding more buttons in panel2...

   content.add(panel2, BorderLayout.CENTER); 

   JPanel panel3 = new JPanel(new GridLayout(1, 3));
   equalButton = new JButton("=");
   panel3.add(equalButton);
   equalButton.addActionListener(AL);

   content.add(panel3, BorderLayout.SOUTH);

   ... more code

How can I most easily implement this to change the "C" button size?

Use a `GridBagLayout` instead. It allows for a cell to span multiple rows or columns. *"I could not figure out how to implement GridBagLayout into my code as it is."* Well.. better to describe exactly what's the problem, given it is the right layout for this. — Andrew Thompson, Nov 07 '16 at 07:00
Here's an example using GridBagLayout for a calculator type, you can use it as a start point: http://stackoverflow.com/a/39235219/2180785 — Frakcool, Nov 07 '16 at 09:42

score 3 · Answer 1 · answered Nov 07 '16 at 08:19

Here is a code snippet for your case. Explanations are in comments.

// Creating a panel with Grid**Bag**Layout
final JPanel pane = new JPanel(new GridBagLayout());

// Setup constraints to future use
final GridBagConstraints c = new GridBagConstraints();

// Let columns to expand horizontally,
// while keeping the same width
c.weightx = 1;

// The same for rows
c.weighty = 1;

// Let the buttons to occupy entire cells
c.fill = GridBagConstraints.BOTH;

c.gridy = 0; // Starting the first row
pane.add(new JButton("1"), c);
pane.add(new JButton("2"), c);
pane.add(new JButton("3"), c);
pane.add(new JButton("+"), c);

c.gridy++; // Switching to next row
pane.add(new JButton("4"), c);
pane.add(new JButton("5"), c);
pane.add(new JButton("6"), c);
pane.add(new JButton("-"), c);

c.gridy++;
pane.add(new JButton("7"), c);
pane.add(new JButton("8"), c);
pane.add(new JButton("9"), c);
pane.add(new JButton("*"), c);

c.gridy++;
// Let the "C" button have double width
c.gridwidth = 2; 
pane.add(new JButton("C"), c);
// Resets to default width for the following buttons
c.gridwidth = 1;
pane.add(new JButton("0"), c);
pane.add(new JButton("/"), c);

c.gridy++;
// Making "=" button have quadruple width
c.gridwidth = 4;
pane.add(new JButton("="), c);

More information are available in How to Use GridBagLayout section of Java Tutorial.

score 2 · Answer 2 · answered Nov 07 '16 at 08:36

I recommend not to use GridLayout, because it is simplistic and really not useful at all for any practical layout. GridBagLayout is outdated, poorly designed, overly complicated, and non-portable. These days we can choose only between GroupLayout, MigLayout, or FormLayout.

I have created your layout using MigLayout. It is a third-party layout manager, so you need to download the corresponding JARs.

package com.zetcode;

import java.awt.EventQueue;
import javax.swing.JButton;
import javax.swing.JFrame;
import net.miginfocom.swing.MigLayout;

public class MigLayoutCalculatorEx extends JFrame {

    public MigLayoutCalculatorEx() {

        initUI();
    }

    private void initUI() {

        setLayout(new MigLayout("fill, gap 1lp"));

        add(new JButton("1"), "grow");
        add(new JButton("2"), "grow");
        add(new JButton("3"), "grow");
        add(new JButton("+"), "grow, wrap");
        add(new JButton("4"), "grow");
        add(new JButton("5"), "grow");
        add(new JButton("6"), "grow");
        add(new JButton("-"), "grow, wrap");
        add(new JButton("7"), "grow");
        add(new JButton("8"), "grow");
        add(new JButton("9"), "grow");
        add(new JButton("*"), "grow, wrap");
        add(new JButton("C"), "grow, spanx 2");
        add(new JButton("0"), "grow");
        add(new JButton("/"), "grow, wrap");
        add(new JButton("="), "grow, spanx");

        pack();

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

    public static void main(String[] args) {

        EventQueue.invokeLater(() -> {
            MigLayoutCalculatorEx ex = new MigLayoutCalculatorEx();
            ex.setVisible(true);
        });
    }
}

MigLayout is a grid-based layout manager, so it is quite easy to create the requested layout.

Here is a screenshot:

How can I implement Flowlayout in java to make it so that my GridLayout can have a different sized button?

2 Answers2