Skip to content
Advertisement

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

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?

Advertisement

Answer

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.

Button GUI

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;
    }

}
Advertisement