Dynamically resize images linked to JLabels in a GridLayout layoutmanager

Question

Current implementation layout:

((EDIT: added Code: ))

private JPanel panelCenter;
private List<BufferedImage> listCreatedImages;
public ChooseCircuitPanel(List<BufferedImage> listCreatedImages) {
        this.listCreatedImages = listCreatedImages;
        initiate();
}
private void initiate() {
        setLayout(new BorderLayout(50, 50));
        panelCenter = new JPanel();
        LayoutManager theLayout = new GridLayout(0, 3, 0, 0);
        panelCenter.setLayout(theLayout);
        panelCenter.setBorder(BorderFactory.createLineBorder(Color.BLACK));
        for (BufferedImage bufferedImage : listCreatedImages) {
            ImageIcon theImage = new ImageIcon(bufferedImage);
            JLabel lblForImage = new JLabel(theImage);
            lblForImage.setBorder(BorderFactory.createLineBorder(Color.BLACK));
            panelCenter.add(lblForImage);
        }
        this.add(panelCenter, BorderLayout.CENTER);
}

Situation:

We want to display a race circuit here. A circuit should be displayed by placing standards tiles next to each other. It should be possible to resize the window, and with that, the circuit tiles should also resize.

((EDIT: bit more info: The race circuit data is stored on a server and the desktop application has to translate the data to a visual thing, by placing some standard tiles in the right order. ))

((EDIT: we are not allowed to use any external library. It should be doable by only using Java Swing code.))

I thought about placing the images in a JLabel and placing these JLabels in a panel with GridLayout as layout manager.

Using a GridLayout - I thought - it should be rather easy to get to a solution: the components in the GridLayout (= JLabels) already scale and do exactly what I want. Now, it would only be a matter of finding a way to resize the images so they fill the JLabels.

As you can see: right now, the images have a fixed size and don't scale at all.

I browsed a bit and saw lots of solutions that boil down to using Graphics2D and super.paintComponent, etc.

But most of these solutions had nothing to do with a GridLayout. So conclusive question: Is there an easier solution aside from using Graphics2D, etc. knowing that I use a GridLayout?

If not, I will of course use Graphics2D, etc. but I'm now just exploring my options. :)

((EDIT: SOLVED The tiles now neatly fit on each other. Don't mind the misalignments, that's our fault.))

Answer 1

There are no Swing components that do what you want so you will need to write your own code.

The easiest approach would be to use Darryl's Stretch Icon on your JLabel.

Or another approach is to create your own custom component that dynamically scales the image as it is painted. Something like the Background Panel which has code that allows you to scale or tile an image.

Answer 2

Given the nature of the view, I would recommend abandoning images altogether and instead implement the rendering in an Icon. Presuming you can make an icon scale with the label.