Areanging calculator interface

Question

in this code the first three buttons appear on the text area, how can I make these buttons start from below the header? before adding the button the buttonarea started below the header, but once I added the button it appeared on the header

   public Design ()
   {

    header = new JPanel ();
    header.setBounds(0, 0, 300, 100);
    header.setBackground(Color.WHITE);
    header.setLayout (null);

    buttonarea = new JPanel ();
    buttonarea.setBounds (0,0, 300, 300);
    buttonarea.setBackground(Color.BLACK);
    buttonarea.setLayout(new GridLayout (6,3));

    add (header);
    add (buttonarea);

    zero = new JButton ("0");
    zero.setBackground(Color.PINK);
    one = new JButton ("1");
    one.setBackground(Color.PINK);
    two = new JButton ("2");
    two.setBackground(Color.PINK);
    three = new JButton ("3");
    three.setBackground(Color.PINK);
    four = new JButton ("4");
    four.setBackground(Color.PINK);
    five = new JButton ("5");
    five.setBackground(Color.PINK);
    six = new JButton ("6");
    six.setBackground(Color.PINK);
    seven = new JButton ("7");
    seven.setBackground(Color.PINK);
    eight = new JButton ("8");
    eight.setBackground(Color.PINK);
    nine = new JButton ("9");
    nine.setBackground(Color.PINK);
    add = new JButton ("+");
    add.setBackground(Color.PINK);
    subtract = new JButton ("-");
    subtract.setBackground(Color.PINK);
    divide = new JButton ("*");
    divide.setBackground(Color.PINK);
    multiply = new JButton ("/");
    multiply.setBackground(Color.PINK);
    square = new JButton ("x^2");
    square.setBackground(Color.PINK);
    equal = new JButton ("=");
    equal.setBackground(Color.PINK);
    c = new JButton ("C");
    c.setBackground(Color.PINK);
    clear = new JButton ("delete");
    clear.setBackground(Color.PINK);
    dot = new JButton (".");
    dot.setBackground(Color.PINK);

    written = new JTextArea ();
    written.setBackground(Color.WHITE);

   header.add (written);

    buttonarea.add (c);
    buttonarea.add (clear);
    buttonarea.add (equal);
    buttonarea.add (zero);
    buttonarea.add (one);
    buttonarea.add (add);
    buttonarea.add (two);   
    buttonarea.add (three);
    buttonarea.add (subtract);
    buttonarea.add (four);
    buttonarea.add (five);
    buttonarea.add (multiply);
    buttonarea.add (six);
    buttonarea.add (seven);
    buttonarea.add (square);
    buttonarea.add (eight); 
    buttonarea.add (nine);    
    buttonarea.add (dot);  
   }  

Answer 1

While null layouts and setBounds() might seem to Swing newbies like the easiest and best way to create complex GUI's, the more Swing GUI'S you create the more serious difficulties you will run into when using them. They won't resize your components when the GUI resizes, they are a royal witch to enhance or maintain, they fail completely when placed in scrollpanes, they look gawd-awful when viewed on all platforms or screen resolutions that are different from the original one.

Use a BorderLayout for the main GUI, placing the JTextField BorderLayout.PAGE_START. Place the JButtons within a GridLayout using JPanel, and place this JPanel in the BorderLayout.CENTER position of the main GUI.

For example this GUI:

Can be made with this GUI:

import java.awt.BorderLayout;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;

@SuppressWarnings("serial")
public class SimpleCalc extends JPanel {
    private static final String[][] BTN_TEXTS = {
        {"C", "Del", "X^2", "+"},
        {"7", "8", "9", "-"},
        {"4", "5", "6", "*"},
        {"1", "2", "3", "/"},
        {"0", ".", "", "="}
    };
    private static final int COLS = 12;
    private static final int GAP = 3;
    private static final char[] NUMBER_ARRAY = "0123456789".toCharArray();
    private static final List<Character> NUMBER_LIST = new ArrayList<>();
    private static final float FONT_SIZE = 36f;
    private JTextField display = new JTextField(COLS);

    static {
        for (char c : NUMBER_ARRAY) {
            NUMBER_LIST.add(c);
        }
    }

    public SimpleCalc() {
        display.setFont(display.getFont().deriveFont(FONT_SIZE));
        display.setFocusable(false);

        int rows = BTN_TEXTS.length;
        int cols = BTN_TEXTS[0].length;
        JPanel buttonPanel = new JPanel(new GridLayout(rows, cols, GAP, GAP));
        for (String[] btnTextRow : BTN_TEXTS) {
            for (String btnText : btnTextRow) {
                if (btnText.isEmpty()) {
                    buttonPanel.add(new JLabel());
                } else {
                    Action action = null;
                    if (NUMBER_LIST.contains(btnText.charAt(0))) {
                        action = new NumericAction(btnText);
                    } else if (".".equals(btnText)) {
                        action = new DotAction(btnText);
                    } else {
                        action = new OperationAction(btnText);
                    }
                    JButton button = new JButton(action);
                    button.setFont(button.getFont().deriveFont(Font.BOLD, FONT_SIZE));
                    buttonPanel.add(button);
                }
            }
        }

        setBorder(BorderFactory.createEmptyBorder(GAP, GAP, GAP, GAP));
        setLayout(new BorderLayout(GAP, GAP));
        add(display, BorderLayout.PAGE_START);
        add(buttonPanel, BorderLayout.CENTER);
    }

    private class NumericAction extends AbstractAction {
        public NumericAction(String name) {
            super(name);
        }

        @Override
        public void actionPerformed(ActionEvent e) {
            String text = display.getText();
            text += e.getActionCommand();
            display.setText(text);
        }
    }

    private class DotAction extends AbstractAction {
        public DotAction(String name) {
            super(name);
        }

        @Override
        public void actionPerformed(ActionEvent e) {
            String text = display.getText();
            if (text.contains(".")) {
                return; // only one dot allowed
            }
            text += e.getActionCommand();
            display.setText(text);
        }
    }

    private class OperationAction extends AbstractAction {
        public OperationAction(String name) {
            super(name);
        }

        @Override
        public void actionPerformed(ActionEvent e) {
            // TODO write code for operations buttons
        }
    }

    private static void createAndShowGui() {
        SimpleCalc mainPanel = new SimpleCalc();

        JFrame frame = new JFrame("SimpleCalc");
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.getContentPane().add(mainPanel);
        frame.pack();
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGui();
            }
        });
    }
}

Answer 2

add (header);
add (buttonarea);

I'm guess you are using a JFrame which uses a BorderLayout. The above code is adding two compenents to the CENTER of the BorderLayout which is not allowed.

Instead you should specify the appropriate constraint:

add (header, BorderLayout.PAGE_NORTH);
add (buttonarea, BorderLayout.CENTER);

And if you are not using a BorderLayout on your frame then you should. Read the section from the Swing tutorial on How to Use BorderLayout for more information and examples.

Also, when creating a JTextAra you should use:

written = new JTextArea (row, columns);

to give the text area an appropriate size. In this case you can probably just add the text area directly to the frame:

//add (header, BorderLayout.PAGE_NORTH);
add (written, BorderLayout.PAGE_NORTH);

There is no need for the wrapper panel.