Search code examples
javaswingawtgrid-layout

How to separate a JTextField from the rest of the GridLayout


I'm trying to make a calculator as a fun project. But as I try to make it look like a... calculator, it just turns out like one big grid, as follows:

Calculator-Window

I've tried to follow along with whatever I found on the Internet, but that was a big bust.

Can anyone help me out trying to separate the JTextField so it doesn't do this, and it can be in it's own row?

Here's the code:

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

public class Main extends JFrame {
    public Main() {
        // Row = ->
        // Column = ^
        Container cp = getContentPane();
        cp.setLayout(new GridLayout(3, 0));

        JTextField txtCalc = new JTextField("0");
        txtCalc.setHorizontalAlignment(SwingConstants.RIGHT);
        JButton btn0 = new JButton("0");
        JButton btn1 = new JButton("1");
        JButton btn2 = new JButton("2");
        JButton btn3 = new JButton("3");
        JButton btn4 = new JButton("4");
        JButton btn5 = new JButton("5");
        JButton btn6 = new JButton("6");
        JButton btn7 = new JButton("7");
        JButton btn8 = new JButton("8");
        JButton btn9 = new JButton("9");
        JButton btn10 = new JButton("10");

        cp.add(txtCalc);
        cp.add(btn0);
        cp.add(btn1);
        cp.add(btn2);
        cp.add(btn3);
        cp.add(btn4);
        cp.add(btn5);
        cp.add(btn6);
        cp.add(btn7);
        cp.add(btn8);
        cp.add(btn9);
        cp.add(btn10);

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Calculator");
        setSize(600, 600);
        setVisible(true);
    }
    public static void main(String[] args) {
        SwingUtilities.invokeLater(Main::new);
    }
}

Edit:

Now I have the answer! This is my fixed code:

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

public class Main extends JFrame {
    public Main() {
        Container cp = getContentPane();
        cp.setLayout(new GridLayout(3, 0));
        JPanel mainPanel = new JPanel(new BorderLayout());
        JPanel buttonPanel = new JPanel(new GridLayout(3, 0));
        setContentPane(border);

        JTextField txtCalc = new JTextField("0");
        txtCalc.setHorizontalAlignment(SwingConstants.RIGHT);
        txtCalc.setEditable(true);

        JButton btn1 = new JButton("1");
        JButton btn2 = new JButton("2");
        JButton btn3 = new JButton("3");
        JButton btn4 = new JButton("4");
        JButton btn5 = new JButton("5");
        JButton btn6 = new JButton("6");
        JButton btn7 = new JButton("7");
        JButton btn8 = new JButton("8");
        JButton btn9 = new JButton("9");
        JButton btn0 = new JButton("0");

        mainPanel.add(buttonPanel, BorderLayout.CENTER);
        mainPanel.add(txtCalc, BorderLayout.NORTH);

        buttonPanel.add(btn1);
        buttonPanel.add(btn2);
        buttonPanel.add(btn3);
        buttonPanel.add(btn4);
        buttonPanel.add(btn5);
        buttonPanel.add(btn6);
        buttonPanel.add(btn7);
        buttonPanel.add(btn8);
        buttonPanel.add(btn9);
        buttonPanel.add(btn0);

    public static void main(String[] args) {
        SwingUtilities.invokeLater(Main::new);
    }
}

Solution

  • Have your main panel use a BorderLayout. Put the JTextField in the North position. Put your buttons in a panel that uses GridLayout, then add that panel to your main panel in the Center position.

    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.*;
    
    public class Main extends JFrame {
    public Main() {
        JPanel mainPanel = new JPanel(new BorderLayout());
        setContentPane(mainPanel);
        JTextField txtCalc = new JTextField("0");
        txtCalc.setHorizontalAlignment(SwingConstants.RIGHT);
    
        JPanel buttonPanel = new JPanel(new GridLayout(3, 0));
    
        JButton btn0 = new JButton("0");
        JButton btn1 = new JButton("1");
        JButton btn2 = new JButton("2");
        JButton btn3 = new JButton("3");
        JButton btn4 = new JButton("4");
        JButton btn5 = new JButton("5");
        JButton btn6 = new JButton("6");
        JButton btn7 = new JButton("7");
        JButton btn8 = new JButton("8");
        JButton btn9 = new JButton("9");
    
        buttonPanel.add(txtCalc);
        buttonPanel.add(btn0);
        buttonPanel.add(btn1);
        buttonPanel.add(btn2);
        buttonPanel.add(btn3);
        buttonPanel.add(btn4);
        buttonPanel.add(btn5);
        buttonPanel.add(btn6);
        buttonPanel.add(btn7);
        buttonPanel.add(btn8);
        buttonPanel.add(btn9);
    
        mainPanel.add(txtCalc, BorderLayout.NORTH);
        mainPanel.add(buttonPanel, BorderLayout.CENTER);
    
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Calculator");
        setSize(600, 600);
        setVisible(true);
    }
    public static void main(String[] args) {
        SwingUtilities.invokeLater(Main::new);
    }
    }