JButtons are shown outside of parent Panel (?)

Question

Newbie here.

I'm trying to create a frame which has a Black panel to create some animations in it, and a ui panel to put the control buttons. But when i create JButtons and add them to ui panel, they seem outside of ui panel.

I think it's because of layouts, but i cannot decide which layout fits best for my situation. Tried GridLayout, GridBoxLayout, BoxLayout...none of them seems okay and i'm pretty sure i'm missing something.

Oracle documents are very rich, but i cannot say it helped me a lot, having trouble to understand layouts.

Here's my code: I edited my code, thanks to Berger's answer, but still, having the trouble, so i updated the code and screenshots to be clear.

Never mind, i forgot fixing some part, Berger's answer is perfeclty working. Thanks!

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

public class gui {
public static void InitializeGUI(){
//DEFINE MAIN FRAME
JFrame window = new JFrame("Simulator");
window.setSize(1000, 1000);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLocationRelativeTo(null);
//DEFINE UNIVERSE PANEL
JPanel universe = new JPanel(){
        /**
     * 
     */
private static final long serialVersionUID = 1L;

@Override
    public Dimension getPreferredSize() {
    return new Dimension(window.getContentPane().getSize().width, 3 *     window.getSize().height / 4);
}
};
universe.setBackground(Color.BLACK);
//DEFINE UI PANEL
JPanel ui = new JPanel() {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(window.getContentPane().getSize().width, window.getSize().height / 4);
    }
};
//DEFINE BUTTONS
JButton femalespawnbutton = new JButton("Spawn Female");
femalespawnbutton.setSize(150, 100);
JButton malespawnbutton = new JButton("Spawn Male");
malespawnbutton.setSize(150, 100);

//FILL
ui.add(femalespawnbutton, BorderLayout.CENTER);
ui.add(malespawnbutton, BorderLayout.CENTER);
window.add(universe, BorderLayout.NORTH);
window.add(ui, BorderLayout.SOUTH);
window.setVisible(true);
 }
}

Here's the screenshot

Answer 1

The first thing is that you add both panels to window, whose content pane has a BorderLayout.

So

window.add(universe);
window.add(ui;

Is the same as

window.add(universe, BorderLayout.CENTER);
window.add(ui, BorderLayout.CENTER);

and both components get added to the same place (the buttons are probably hidden)

To avoid that, you may give the constraints indicating where in the BorderLayout you want to add your components, .eg :

window.add(universe, BorderLayout.CENTER);
window.add(ui, BorderLayout.SOUTH);

The second thing is that you are using setSize(), which won't be taken into account except if you have no layout manager .

You may use setPreferredSize instead, its height value will be honored by some layout manager, like BorderLayout for the SOUTH or NORTH component . :

ui.setPreferredSize(new Dimension(1000, 250));

Now if you want it to adapt to the window's size, override the method instead :

JPanel ui = new JPanel() {

            @Override
            public Dimension getPreferredSize() {

                return new Dimension(window.getContentPane().getSize().width, window.getContentPane().getSize().height / 4);

            }
        };

Putting it all together (as the preferred height of the south component is honored, no need in your case to give one to the center component, it will take the remaining space) :

   //DEFINE MAIN FRAME
    final JFrame window = new JFrame("Simulator");
    window.setSize(1000, 1000);
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    window.setLocationRelativeTo(null);

    //DEFINE UNIVERSE PANEL
    JPanel universe = new JPanel();
    universe.setBackground(Color.BLACK);

    //DEFINE UI PANEL
    JPanel ui = new JPanel() {

        @Override
        public Dimension getPreferredSize() {

            return new Dimension(window.getContentPane().getSize().width, window.getContentPane().getSize().height / 4);

        }
    };

    //DEFINE BUTTONS
    JButton femalespawnbutton = new JButton("Spawn Female");
    femalespawnbutton.setSize(250, 100);
    JButton malespawnbutton = new JButton("Spawn Male");
    malespawnbutton.setSize(250, 100);

    //FILL
    ui.add(femalespawnbutton);
    ui.add(malespawnbutton);
    window.add(universe, BorderLayout.CENTER);
    window.add(ui, BorderLayout.SOUTH);
    window.setVisible(true);

Final important note :

Despite this approach working in some cases, it should be discouraged to set sizes of the components by yourself (except for top level containers like windows) :

See : Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing?

Answer 2

I am sorry - currently I have not much time - but for now: Its a problem with the LayoutManager. You should set one when initializing the JPanel. e.g. new Jpanel(new GridLayout(1,2)); -> will work but is not nice ;) Further information about Layouts:

https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html