Adding elements (i.e. JLabels) outside of the set layout

Question

As part of a project we've got to have 9 boxes, here I've just implemented alternating colors as an example in place of the images we should be using. But whilst I want these 9 JLabels in this grid layout (3,3) , I also want to have a message at the top (a JLabel ) that I can just centralize, like a welcoming message as well as having around four JButtons underneath? Can somebody please point me in the right direction as to how to achieve this?

Thank you!

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

class HomeController extends JPanel implements MouseListener
{
    HomeController()
    {
        setLayout(new GridLayout(3,3));

        JLabel apl1 = new JLabel("");
        apl1.setBackground(Color.WHITE);
        apl1.setOpaque(true);
        this.add(apl1);

        JLabel apl2 = new JLabel("");
        apl2.setBackground(Color.BLACK);
        apl2.setOpaque(true);
        this.add(apl2);

        JLabel apl3 = new JLabel("");
        apl3.setBackground(Color.WHITE);
        apl3.setOpaque(true);
        this.add(apl3);

        JLabel apl4 = new JLabel("");
        apl4.setBackground(Color.BLACK);
        apl4.setOpaque(true);
        this.add(apl4);

        JLabel apl5 = new JLabel("");
        apl5.setBackground(Color.WHITE);
        apl5.setOpaque(true);
        this.add(apl5);

        JLabel apl6 = new JLabel("");
        apl6.setBackground(Color.BLACK);
        apl6.setOpaque(true);
        this.add(apl6);

        JLabel apl7 = new JLabel("");
        apl7.setBackground(Color.WHITE);
        apl7.setOpaque(true);
        this.add(apl7);

        JLabel apl8 = new JLabel("");
        apl8.setBackground(Color.BLACK);
        apl8.setOpaque(true);
        this.add(apl8);

        JLabel apl9 = new JLabel("");
        apl9.setBackground(Color.WHITE);
        apl9.setOpaque(true);
        this.add(apl9);

        JLabel message = new JLabel("hello world");
        this.add(message);
    }
}

Answer 1

You can combine multiple panels with different layouts. For details take a look at A Visual Guide to Layout Managers .

For example, default layout of JFrame is BorderLayout . Using BorderLayout , you can place the title at BorderLayout.NORTH , panel with buttons at BorderLayout.SOUTH and panel with grid of labels at BorderLayout.CENTER . Each panel may have its own more complex layout. For example, grid of labels is using GridLayout , and buttons panel is using FlowLayout .

Here is a very simple example based on the posted code that demonstrates this approach:

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

public class TestGrid {
    public TestGrid() {
        final JFrame frame = new JFrame("Grid");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel mainPanel = new JPanel(new GridLayout(3, 3));

        for (int idx = 0; idx < 9; idx++) {
            JLabel label = new JLabel();
            label.setBackground(idx % 2 == 0 ? Color.WHITE : Color.BLACK);
            label.setOpaque(true);
            mainPanel.add(label);
        }
        mainPanel.setPreferredSize(new Dimension(200, 200));
        frame.add(mainPanel, BorderLayout.CENTER);

        frame.add(new JLabel("Title", JLabel.CENTER), BorderLayout.NORTH);

        JPanel buttonsPanel = new JPanel();
        buttonsPanel.add(new JButton("Start"));
        buttonsPanel.add(new JButton("Stop"));
        frame.add(buttonsPanel, BorderLayout.SOUTH);

        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        try {
          UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
        } catch (Exception e) {
            e.printStackTrace();
        }
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new TestGrid();
            }
        });
    }
}