How do I put two Jpanels/Jbuttons in the borderlayout north section?

Question

How do I display two JPanels in the 'North' in borderlayout?

Here's and example code that outputs a GUI with three distinct rows, Top, Middle, Bottom. There's one button covering the first row, 3 buttons covering the second row, and one covering the bottom row.

package borderLayoutDemo;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.BorderLayout;

public class BorderLayoutDemo {
    public static void main(String[] args) {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame fj = new JFrame("Demonstration of Border Layout");
        fj.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JButton jbtn1 = new JButton("UP");
        JButton jbtn2 = new JButton("DOWN");
        JButton jbtn3 = new JButton("LEFT");
        JButton jbtn4 = new JButton("RIGHT");
        JButton jbtn5 = new JButton("MIDDLE");
        JPanel pnl = new JPanel();
        pnl.setLayout(new BorderLayout());
        pnl.add(jbtn1, BorderLayout.NORTH);
        pnl.add(jbtn2, BorderLayout.SOUTH);
        pnl.add(jbtn3, BorderLayout.WEST);
        pnl.add(jbtn4, BorderLayout.EAST);
        pnl.add(jbtn5, BorderLayout.CENTER);
        fj.add(pnl);
        fj.pack();
        fj.setVisible(true);
    }
}

Output of above code: output of above code

However, I'd like there to be two jpanels in the North section so it'd make 4 "rows" like this:

|---------------button--------------| //north
|---------------button2-------------| //north
----------------center---------------  //center
|---------------button3-------------|  //south

I've tried simply just adding it as follows:

pnl.add(jbtn1, BorderLayout.NORTH);
pnl.add(jbtn2, BorderLayout.NORTH);

But what happens here is the second button just replaces the first one:

|---------------button2-------------| //north
----------------center---------------  //center
|---------------button3-------------|  //south

How would I get two rows in the north layout area?

You can only add one component to the north section. So make that component a JPanel and add the other components to the panel. You will probably want to use a different layout for that panel. Using mulitple panels inside other panels with different layouts is a common GUI technique. — WJS, Oct 19 '20 at 14:56
You can put 2 JPanells on a third JPanel and add that third JPannel — ABC, Oct 19 '20 at 14:56
@BUG thanks, so I tried doing that but what layout would I use for the third jpanel combined? would I use gridlayout? I tried doing a borderlayout for the two panels but it doesn't seem to work. then i'd add that combined panel to the other one — Johnny Robertson, Oct 19 '20 at 14:58
If they should be strictly below each other independent of the witdh a [`BoxLayout`](https://docs.oracle.com/javase/8/docs/api/index.html?javax/swing/BoxLayout.html) seems suitable. — MDK, Oct 19 '20 at 15:00
You can use ```setBounds()``` method to set the position and size you want — ABC, Oct 19 '20 at 15:01
However the use of `setSize()` and `setBounds()` is discouraged as explained [here](https://stackoverflow.com/a/19415229/11948496) — MDK, Oct 19 '20 at 15:04
**Don't use setSize() or setBounds()!!!** Swing was designed to be used with layout managers. Read the Swing tutorial on [Layout Managers](https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html) and then determine which combination of layout manager works for you. — camickr, Oct 19 '20 at 15:31
thanks guys, I ended up using two borderlayouts and setting the first row to north and the second row to center and then i added that third jpanel with border layout to a 4th borderlayout jpanel — Johnny Robertson, Oct 19 '20 at 16:43

score 2 · Accepted Answer · answered Oct 19 '20 at 16:57

Creating a more complex GUI is straightforward when you think of a GUI as a JFrame with as many JPanels as necessary to define the GUI.

Here's the GUI you were looking for.

I created a JPanel for each section of the JFrame (NORTH, CENTER, and SOUTH). Each of those JPanels used a BorderLayout so that when you expand the GUI, the NORTH and SOUTH buttons stay the same height.

Here's the complete runnable example code.

import java.awt.BorderLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class BorderLayoutDemo implements Runnable {

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

    @Override
    public void run() {
        JFrame fj = new JFrame("Demonstration of Border Layout");
        fj.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        fj.add(createNorthPanel(), BorderLayout.NORTH);
        fj.add(createCenterPanel(), BorderLayout.CENTER);
        fj.add(createSouthPanel(), BorderLayout.SOUTH);
        
        fj.pack();
        fj.setLocationByPlatform(true);
        fj.setVisible(true);
    }
    
    private JPanel createNorthPanel() {
        JPanel panel = new JPanel(new BorderLayout());
        
        JButton button1 = new JButton("North Button");
        panel.add(button1, BorderLayout.NORTH);
        
        JButton button2 = new JButton("North Button 2");
        panel.add(button2, BorderLayout.SOUTH);
        
        return panel;
    }
    
    private JPanel createCenterPanel() {
        JPanel panel = new JPanel(new BorderLayout());
        
        JButton button = new JButton("Center Button");
        panel.add(button, BorderLayout.CENTER);
        
        return panel;
    }
    
    private JPanel createSouthPanel() {
        JPanel panel = new JPanel(new BorderLayout());
        
        JButton button = new JButton("South Button");
        panel.add(button, BorderLayout.SOUTH);
        
        return panel;
    }

}

How do I put two Jpanels/Jbuttons in the borderlayout north section?

1 Answers1

Linked