How do I make A JPanel grid?

Question

i'm trying to create a gui for chess-like game (6x6 board with less pieces).

creating the board is pretty easy with for loops and JPanels but I have no idea how to put the pieces on top of the JPanel. I tried adding one piece by creating a JLabel object with an icon and add it to JPanel but it doesn't look good.

public class BoardPanel extends JPanel
{
    public static final int LENGTH = 6;
    private final Color[] COLOR_ARRAY = {Color.decode("#FFFACD"), Color.decode("#593E1A")};

    public BoardPanel() 
    {
        //grid layout 6x6
        setLayout(new GridLayout(LENGTH, LENGTH));
        int numView = 0;
        //tiles color determined by odd/even
        for (int i = 0; i < LENGTH; i++) 
            {
                for (int j = 0; j < LENGTH; j++)
                {
                    add(new TileView(numView, COLOR_ARRAY[j % 2]));
                }

                swap();
            }

    }

    private void swap() {

        Color temp = COLOR_ARRAY[0];
        COLOR_ARRAY[0] = COLOR_ARRAY[1];
        COLOR_ARRAY[1] = temp;
    }
}

is there a particular class that i need to use in order to do this properly? default board:

default board

board with one piece:

board with one piece

Thanks,

Possible duplicate of [Making a robust, resizable Swing Chess GUI](https://stackoverflow.com/questions/21142686/making-a-robust-resizable-swing-chess-gui) — Sergiy Medvynskyy, Aug 08 '18 at 12:38
Adding a JLabel with an icon to the JPanel sounds like a good idea. What about it "doesn't it look good"? — Amber, Aug 08 '18 at 15:09
See also [Making a robust, resizable Swing Chess GUI](http://stackoverflow.com/q/21142686/418556). — Andrew Thompson, Aug 09 '18 at 00:32

c0der · Accepted Answer · 2021-12-30T16:45:20.283

To get the board right, just handle the color change :

class BoardPanel extends JPanel
{
    public static final int LENGTH = 6;
    private final Color[] COLOR_ARRAY = {Color.decode("#FFFACD"), Color.decode("#593E1A")};

    public BoardPanel()   {
        //grid layout 6x6
        setLayout(new GridLayout(LENGTH, LENGTH));
        int numView = 1;

        for (int i = 0; i < LENGTH; i++)
        {
            numView = (numView == 0) ? 1:0;
            for (int j = 0; j < LENGTH; j++)
            {
                add(new TileView(COLOR_ARRAY[numView]));
                numView = (numView == 0) ? 1:0;
            }
        }
    }
}

class TileView extends JLabel {

    TileView(Color color) {
        setPreferredSize(new Dimension(100,100));
        setOpaque(true);
        setBackground(color);
    }
}

Trying to add another component (the piece) to the board (gridlayout) messes it up.
What you want to do is add another JPanel that contains the pieces.
The pieces JPanel needs to be transparent, so the board under it, is visible. One way to achieve it in swing is to use a glass pane :

import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridLayout;
import java.net.MalformedURLException;
import java.net.URL;
import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;

public class Chess extends JFrame {

    public Chess()  {

        setDefaultCloseOperation(EXIT_ON_CLOSE);
        add( new BoardPanel());          //add underlaying board
        setGlassPane(new PiecesPanel()); //add glass pane
        getGlassPane().setVisible(true);
        pack();
        setVisible(true);
    }

    public static void main(String[] args) throws InterruptedException {
        new Chess();
    }
}

class BoardPanel extends JPanel {

    public static final int LENGTH = 6;
    private final Color[] COLOR_ARRAY = {Color.decode("#FFFACD"), Color.decode("#593E1A")};

    public BoardPanel()   {
        //grid layout 6x6
        setLayout(new GridLayout(LENGTH, LENGTH));
        int numView = 1;
        //tiles color determined by odd/even
        for (int i = 0; i < LENGTH; i++)
        {
            numView = (numView == 0) ? 1:0;
            for (int j = 0; j < LENGTH; j++)
            {
                add(new TileView(COLOR_ARRAY[numView]));
                numView = (numView == 0) ? 1:0;
            }
        }
    }
}

//container for pieces
class PiecesPanel extends JPanel {

    public static final int LENGTH = 6;
    PiecesPanel(){

        setOpaque(false); //make it transparent
        setLayout(new GridLayout(LENGTH, LENGTH));
        JComponent piece = new Piece();
        add(piece);
    }
}

class TileView extends JLabel {

    public static final int SIZE = 100;
    TileView(Color color) {
        setPreferredSize(new Dimension(SIZE, SIZE));
        setOpaque(true);
        setBackground(color);
    }
}

class Piece extends JLabel{

    Piece() {

        URL url = null;
        try {
            url = new URL("https://dl1.cbsistatic.com/i/r/2017/08/15/9b37ca73-de21-4998-ae7a-07d2915a551e/thumbnail/64x64/0cd91f1c045919af6bdafab3a6f07f99/imgingest-6339051052035379444.png");
        } catch (MalformedURLException ex) { ex.printStackTrace();  }
        setIcon(new ImageIcon(url));
        setVerticalTextPosition(SwingConstants.BOTTOM);
        setHorizontalTextPosition(SwingConstants.CENTER);
    }
}

Edit: the Piece image link is dead. Use https://findicons.com/files/icons/2711/free_icons_for_windows8_metro/64/pawn.png instead

amazing sir, i will implement this thank you for your help :). — alexW, Aug 10 '18 at 13:35

How do I make A JPanel grid?

1 Answers1

Linked