Buttons will not be displayed horizontal to each other. Only overlapped on top of each other

Question

I am having issues printing buttons to my java swing project. For class, I am suppose to replicate a GUI. Thus far, I have been able to do it just fine. But I am having an issue with the buttons overlapping each other in the same location as opposed to next to each other horizontally. Below is an image of how the buttons are being printed onto the the panel.

So I have two panels, one that houses the labels and text boxes (Toppane) and one that houses the buttons, 5 in total (bottomPane). I am trying to get the five buttons to print across the bottom of the GUI and am having a hard time. I feel like I am missing something simple.

--------------------------------------------------------------
|                 label [textfield]                          |
|                 label [textField]                          |
|                 label [textfield]                          |
|-------------------------------------------------------------
|  [button] [button] [button] [button] [button]              |
--------------------------------------------------------------

But i get this:

--------------------------------------------------------------
|                 label [textfield]                          |
|                 label [textField]                          |
|                 label [textfield]                          |
|-------------------------------------------------------------
|              [        Button's 12345       ]               |
--------------------------------------------------------------

Code:

package book;

import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JTextField;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;


/**
 *
 * @author KJ4CC
 */
public class Book extends JFrame  {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
       Book book = new Book();
        book.bookingUI();
    }
    public static void  bookingUI(){

        //sets windows, and pane in the UI 
        JFrame frame = new JFrame("Ye old Book store");
        JPanel toppane = new JPanel(new GridBagLayout());
        JPanel bottomPane = new JPanel(new GridBagLayout());
        GridBagConstraints c = new GridBagConstraints();
        frame.setSize(1000, 600);
        frame.setVisible(true);

        //adds labels  to the window
        JLabel num = new JLabel("Enter Number of Items in this Order");
        JLabel bookID = new JLabel("111111");
        JLabel quantityItem = new JLabel("222222");
        JLabel itemInfo = new JLabel("333zfgfsfg333");
        JLabel subtotal = new JLabel("4444444");

        //adding the labels to the panel 
        c.anchor = GridBagConstraints.EAST;
        c.weighty = 1;
        c.gridx = 2;
        c.gridy = 1;
        toppane.add(num, c);
        c.gridx = 2;
        c.gridy = 2;
        toppane.add(bookID, c);
        c.gridx = 2;
        c.gridy = 3;
        toppane.add(quantityItem, c);
        c.gridx = 2;
        c.gridy = 4;
        toppane.add(itemInfo,c);
        c.gridx = 2;
        c.gridy = 5;
        toppane.add(subtotal,c);
        bottomPane.setBackground(Color.GREEN);
        frame.add(toppane,BorderLayout.EAST);

       //adds textfields to the frame 
        JTextField amount = new JTextField();
        JTextField id = new JTextField();
        JTextField quantity = new JTextField();
        JTextField info = new JTextField();
        JTextField total = new JTextField();

        //add textfield to panel
        c.ipadx = 230;
        c.gridx = 3;
        c.gridy= 1;
        toppane.add(amount, c);
        c.gridx = 3;
        c.gridy = 2;
        toppane.add(id, c);
        c.gridx = 3;
        c.gridy = 3;
        toppane.add(info, c);
        c.gridx = 3;
        c.gridy = 4;
        toppane.add(total, c);
        c.gridx = 3;
        c.gridy = 5; 
        toppane.add(quantity,c);

    //setting up buttons to be placed onto the bottompanel 
    JButton processItem = new JButton("Process Item");
    JButton confirmItem = new JButton("Confirm Item");
    JButton viewOrder = new JButton("View Order");
    JButton finishOrder = new JButton("Finish Order ");
    JButton newOrder = new JButton("New Order");
    JButton exit = new JButton("Exit");

    //adding the buttons to the pane.
    GridBagConstraints b = new GridBagConstraints();
    b.anchor = GridBagConstraints.NORTHWEST;
    bottomPane.add(processItem, c);
    bottomPane.add(confirmItem,c);
    bottomPane.add(viewOrder, c);
    bottomPane.add(finishOrder,c);
    bottomPane.add(newOrder,c);

    bottomPane.add(exit, c);
    bottomPane.setBackground(Color.BLUE);
    frame.add(bottomPane,BorderLayout.SOUTH);
    }
}

Personally I feel like it has something to do with the layout manager that I am using. I don't know if I am using it properly for the right application. I have been using GridBagLayout, and that is all I have used for school thus far.

Answer 1

GridBagLayout is outdated. And it is a pain to work with. With a modern layout manager like MigLayout, your code example can be created very quickly.

package com.zetcode;

import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;
import net.miginfocom.swing.MigLayout;

/**
 * MigLayout demonstration example.
 * @author Jan Bodnar
 * Website zetcode.com
 */

public class MigLayoutBookEx extends JFrame {

    public MigLayoutBookEx() {

        initUI();
    }

    private void initUI() {

        JLabel lbl1 = new JLabel("Label");
        JLabel lbl2 = new JLabel("Label");
        JLabel lbl3 = new JLabel("Label");

        JTextField field1 = new JTextField(15);
        JTextField field2 = new JTextField(15);
        JTextField field3 = new JTextField(15);

        JButton btn1 = new JButton("Button");
        JButton btn2 = new JButton("Button");
        JButton btn3 = new JButton("Button");
        JButton btn4 = new JButton("Button");
        JButton btn5 = new JButton("Button");

        createLayout(lbl1, field1, lbl2, field2, lbl3, field3,
                btn1, btn2, btn3, btn4, btn5);

        setTitle("MigLayoutExample");

        setLocationRelativeTo(null);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    private void createLayout(JComponent... arg) {

        setLayout(new MigLayout("ins 10lp, gap 5lp 8lp, fillx", "[center]"));

        add(arg[0], "split 2, span");
        add(arg[1], "wrap");
        add(arg[2], "split 2, span");
        add(arg[3], "wrap");
        add(arg[4], "split 2, span");
        add(arg[5], "wrap");
        add(arg[6], "split 5, gapy 5lp, align left");
        add(arg[7]);
        add(arg[8]);
        add(arg[9]);
        add(arg[10]);

        pack();
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            MigLayoutBookEx ex = new MigLayoutBookEx();
            ex.setVisible(true);
        });
    }
}

The layout is created with a combination of various constraints. Once you learn this, most practical layouts are a piece of cake. You can find out more on the manager's website.

Screenshot:

Answer 2

You need to use Flow layout to your bottomPane. Is't better then GridLayout for this use.

Answer 3

Ok so i set the bottom panel to a boxlayout and got the buttons horizontal!

Code with fix!

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package book;
import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.BoxLayout;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;
import java.awt.Insets;


/**
 *
 * @author KJ4CC
 */
public class UserInterface extends JFrame {

    public void startUI(){

        UserInterface gui = new UserInterface();
        gui.bookingUI();
    }
    public static void  bookingUI(){
        //sets windows, and pane in the UI 
        JFrame frame = new JFrame("Ye old Book store");
        JPanel toppane = new JPanel(new GridBagLayout());
        JPanel bottomPane = new JPanel();
        bottomPane.setLayout(new BoxLayout(bottomPane, BoxLayout.LINE_AXIS)); <---------------------------------------------Here is the fix
        GridBagConstraints c = new GridBagConstraints();
        frame.setSize(800, 300);
        frame.setVisible(true);
        //adds labels  to the window
        JLabel num = new JLabel("Enter Number of Items in this Order");
        JLabel bookID = new JLabel("111111");
        JLabel quantityItem = new JLabel("222222");
        JLabel itemInfo = new JLabel("33333");
        JLabel subtotal = new JLabel("4444444");
        //adding the labels to the panel-----------------------------------------------------
        c.insets = new Insets(5,0,0,0);
        c.gridx = 2;
        c.gridy = 1;
        toppane.add(num, c);
        c.gridx = 2;
        c.gridy = 2;
        toppane.add(bookID, c);
        c.gridx = 2;
        c.gridy = 3;
        toppane.add(quantityItem, c);
        c.gridx = 2;
        c.gridy = 4;
        toppane.add(itemInfo,c);
        c.gridx = 2;
        c.gridy = 5;
        toppane.add(subtotal,c);
        toppane.setBackground(Color.GREEN);
        frame.add(toppane);


       //adds textfields to the frame ----------------------------------------------------
        JTextField amount = new JTextField();
        JTextField id = new JTextField();
        JTextField quantity = new JTextField();
        JTextField info = new JTextField();
        JTextField total = new JTextField();
        //add textfield to panel
        c.ipadx = 400;
        c.insets = new Insets(5,10,0,0);
        c.gridx = 3;
        c.gridy= 1;
        toppane.add(amount, c);
        c.gridx = 3;
        c.gridy = 2;
        toppane.add(id, c);
        c.gridx = 3;
        c.gridy = 3;
        toppane.add(info, c);
        c.gridx = 3;
        c.gridy = 4;
        toppane.add(total, c);
        c.gridx = 3;
        c.gridy = 5; 
        toppane.add(quantity,c);

    //----------------------------------------------------------BUTTOM PANE-------------------------
    //setting up buttons to be placed onto the bottompanel 
    JButton processItem = new JButton("Process Item");
    JButton confirmItem = new JButton("Confirm Item");
    JButton viewOrder = new JButton("View Order");
    JButton finishOrder = new JButton("Finish Order ");
    JButton newOrder = new JButton("New Order");
    JButton exit = new JButton("Exit");
    //adding the buttons to the pane.---------------------------------------------------------------
    GridBagConstraints b = new GridBagConstraints();
    b.ipadx = 20;
    b.ipady = 20;
    b.gridx = 0;
    b.gridy = 1;
    bottomPane.add(processItem, c);
    b.gridx = 0;
    b.gridy = 2;
    bottomPane.add(confirmItem,c);
    b.gridx = 0;
    b.gridy = 3;
    bottomPane.add(viewOrder, c);
    b.gridx = 0;
    b.gridy = 4;
    bottomPane.add(finishOrder,c);
    b.gridx = 0;
    b.gridy = 5;
    bottomPane.add(newOrder,c);
    b.gridx = 0;
    b.gridy = 6;
    bottomPane.add(exit, c);
    bottomPane.setBackground(Color.BLUE);
    frame.add(bottomPane,BorderLayout.SOUTH);
    frame.setSize(810, 310);

    }



}

Answer 4

Your issue is that you are using the same constraint c for every one of your new buttons:

bottomPane.add(processItem, c);
bottomPane.add(confirmItem,c);
bottomPane.add(viewOrder, c);
bottomPane.add(finishOrder,c);
bottomPane.add(newOrder,c);

The last modification you made to c was up above when you did:

c.gridx = 3;
c.gridy = 5; 

And then you're just reusing that same constraint for all 5 new buttons and thus adding them all to the same grid location.

You'll need to set the constraints accordingly (e.g. set c's values, you've got that stray unused b there, too) for each one.