Java Swing center JLabel in JPanel with two JLabels

I'm doing this chess using Swing.

For the board (JPanel) I'm using new GridLayout(8, 8) then I add 64 Squares (JPanel) to it.

Inside each Square I have a JLabel for the algebraic notation (A8, A7...), this label is well positionated.

The problem comes with the other JLabel containing the piece image, this one is not centered vertically, how can I center this JLabel in the Square?.

Here's the code for the Square:

package org.victorpiles.escacs.client.gui;

import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

/**
 * @author Víctor Piles
 */
public class Square extends JPanel {
	private static final String PIECE_ICON_PATH = "client/src/main/resources/pieces/";

	private static final Color LIGHT_COLOR = new Color(118, 150, 86, 255);
	private static final Color DARK_COLOR = new Color(238, 238, 210, 255);

	private final int position;

	public Square(int position) {
		super(new BorderLayout());

		setAlgebraicNotationLabel(position);

		this.position = position;
		setBackground(getSquareColor(position));
	}

	private void setAlgebraicNotationLabel(int position) {
		JLabel squarePosition = new JLabel(getAlgebraicNotation(position));
		squarePosition.setBorder(new EmptyBorder(5, 5, 5, 5));
		add(squarePosition, BorderLayout.PAGE_END);
	}

	/**
	 * Calcula el color adequat per a la casella, basant-se en la seua posició.
	 *
	 * @param position La posició de la casella.
	 *
	 * @return El color de la casella: {@link #LIGHT_COLOR clar} o {@link #DARK_COLOR fosc}.
	 */
	private Color getSquareColor(int position) {
		int row = position / 8;
		int column = position % 8;

		return (row + column) % 2 != 0 ? LIGHT_COLOR : DARK_COLOR;
	}

	/**
	 * Calcula la notació algebraica per a la casella, basant-se en la seua posició.
	 *
	 * @param position La posició de la casella.
	 *
	 * @return La notació algebraica per a la casella.
	 */
	private String getAlgebraicNotation(int position) {
		int row = 8 - (position / 8);
		char column = (char) ('a' + (position % 8));

		return ("" + column + row).toUpperCase();
	}

	public void updatePiece(char piece) {
		removeAll();

		BufferedImage pieceImage;

		if (piece == '-') {
			return;
		}

		String fileName = PIECE_ICON_PATH + piece + ".png";
		try {
			pieceImage = ImageIO.read(new File(fileName));
			System.out.println(position + " -> " + pieceImage.getHeight());
		} catch (IOException e) {
			// TODO: 20/3/23 Manejar excepció
			throw new RuntimeException(e);
		}

		/* Actualitza la casella */
		setAlgebraicNotationLabel(position);
		add(new JLabel(new ImageIcon(pieceImage)));
		validate();
	}
}

> the image is not vertically centered because of the other JLabel taking part of the space

That is the way layout managers work. Components are assigned location in 2D space. So if the image is 60 X 60, then the notation label will be displayed below the image, not on top of the image.

If you want the notation label displayed on top of the image label, then you need to add the notation label to the image label.

You would need to define your image label as an instance variable in your class. In your constructor you would do something like:

imageLabel = new ImageLabel();
imageLabel.setLayout( new BorderLayout() );
add( imageLabel );
setAlgebraicNotationLabel(position);
...

In the setAlgebraicNotationLabel(...) method you would then use:

//add(squarePosition, BorderLayout.PAGE_END);
imageLabel.add(squarePosition, BorderLayout.PAGE_END);

to add the notation label to the image label, not the panel

Your updatePiece(...) method would then also need to be changed to use the setIcon(...) method to just update the Icon of the image label, instead of creating a new label each time.

I did it this way:

I add the notation label at the PAGE_END of the image label, for this purpose the image label layout is setLayout(new BorderLayout());

private JLabel getAlgebraicNotationLabel(int position) {
		JLabel notationLabel = new JLabel(getAlgebraicNotation(position));
		notationLabel.setBorder(new EmptyBorder(0, 5, 5, 0));
		return notationLabel;
}

public void updatePiece(char piece) {
		removeAll();

		BufferedImage pieceImage;

		if (piece == '-') {
			return;
		}

		String fileName = PIECE_ICON_PATH + piece + ".png";
		try {
			pieceImage = ImageIO.read(new File(fileName));
		} catch (IOException e) {
			// TODO: 20/3/23 Manejar excepció
			throw new RuntimeException(e);
		}

		/* Actualitza la casella */
		JLabel squareLabel = new JLabel(new ImageIcon(pieceImage));
		squareLabel.setLayout(new BorderLayout());
		squareLabel.add(getAlgebraicNotationLabel(position),BorderLayout.PAGE_END);
		add(squareLabel);
		validate();
}

The final result: