Having a JLabel on top of another JLabel that has an image

Question

Soo I'm trying to make a board game with GUI. I created a JLabel with the player's name and want to use that as a token. Then I made another JLabel that contains the image of the board. I added both the labels onto a boardPanel and right now, the labels are side by side. How do I make it so that instead of it being side to side, the JLabel w/ name is on the JLabel w/ img?

Is there something I should be considering for the panel that contains the two labels? Like a certain Layout Manager?

[just sections of my code]

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

public class BoardFrame extends JFrame {

   private JPanel mainPanel, boardImgPanel,jPanelSouth,buttonPanel
           ,cardPanel,statsPanel;
   private boardImgLabel;

   Player player1;

   public BoardFrame() {
      //boardPanel and stuff in it
      boardImgPanel = new JPanel();
      boardImgLabel = new JLabel();
      boardImgLabel.setIcon(new ImageIcon("BOARDPICTUREHERE"));
      boardImgPanel.add(boardImgLabel);

      /////////////////////ADDING PLAYERS/////////////////////
      player1 = new Player("Steven", 1,1,1,1,1);
      JLabel player1Label = new JLabel(player1.getPlayerName());
      boardImgPanel.add(player1Label);

      mainPanel = new JPanel(new GridLayout(0, 1));

      add(mainPanel);

   }
}

something like this but obviously instead of a cat, it's the board image, and the text is the player name.

EDIT

I made a class that extends the jpanel and then wanted to add it into the BoardFrame class

import java.awt.BorderLayout;
import java.awt.Color;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class BoardPanelNorth extends JPanel {
        File imageFile = new File("....");

        JLabel boardImgLabel = new JLabel();
        Player player1;

        public BoardPanelNorth() {
            setLayout(new BorderLayout());
            try {
                boardImgLabel = new JLabel(new ImageIcon(ImageIO.read(imageFile)));
                boardImgLabel.setLayout(new BorderLayout());

                player1 = new Player("Steven", 1,1,1,1,1);
                JLabel player1Label = new JLabel(player1.getPlayerName());
                player1Label.setFont(player1Label.getFont().deriveFont(128f));
                player1Label.setHorizontalAlignment(JLabel.RIGHT);
                player1Label.setVerticalAlignment(JLabel.BOTTOM);
                player1Label.setForeground(Color.WHITE);

                add(boardImgLabel);
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }

}

Board Frame class:

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

public class BoardFrame extends JFrame {

   private JPanel mainPanel, boardImgPanel;
   private JSplitPane splitPane;

   public BoardFrame() {

      boardImgPanel = new BoardPanelNorth();


      //split plane
      splitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT, 
         new JScrollPane(boardImgPanel), jPanelSouth);
      splitPane.setDividerLocation(470); //top size
      splitPane.enable(false); //cant adjust


      mainPanel = new JPanel(new GridLayout(0, 1));
      mainPanel.add(splitPane);

      add(mainPanel);

   }
}

Player Steven still does not seem to appear on the map.

Answer 1

You could make use of an OverlayLayout or you could simply add the second JLabel to the first. The trick here though, is to set up a layout manager for the first label.

Beware though, a JLabel only use the icon and text properties its determine the preferred layout size, which could end up truncating it's children

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

    public static void main(String[] args) {
        new Test();
    }

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new BorderLayout());
            try {
                JLabel background = new JLabel(new ImageIcon(ImageIO.read(...)));
                background.setLayout(new BorderLayout());
                JLabel text = new JLabel("I'm just drawn this way");
                text.setFont(text.getFont().deriveFont(128f));
                text.setHorizontalAlignment(JLabel.RIGHT);
                text.setVerticalAlignment(JLabel.BOTTOM);
                text.setForeground(Color.WHITE);

                background.add(text);

                add(background);
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }

    }

}

Answer 2

i do the below way in my GUI project: 1.make a jPanel with OverlayLayout 2.put two jlabels into the jPanel 3.make a keyEvent or something like that

enter image description here enter image description here my GUI project example code:

    private void jLabel2KeyPressed(java.awt.event.KeyEvent evt) {
int i = evt.getKeyCode();
  switch (i) {
 // some parts of my code }
if(k5==true&&ke==true&&k1==false&&k3==false) {
jLabel2.setIcon(new javax.swing.ImageIcon(getClass().getResource("/audit/images/tie.png")));

 jLabel177.setIcon(new javax.swing.ImageIcon(getClass().getResource("/audit/images/tie1forbigroad.png")));
}
}