Java JPanel, how to overlap them (to set a background image)

Question

I need to set a background image in my program. The structure of the main GUI is:

JFrame that contains - JPanel with BoxLayou that contains... etc

i need to put an image behind the first JPanel, but I don't know how.

i wrote this code:

JPanel background = new JPanel();
JLabel labl = new JLabel("This is a dummy label this is a dummy label");
background.add(labl);
// TODO insert an image in background.
Component VERT_RA = Box.createRigidArea(new Dimension(0, 10));
Component HORI_RA = Box.createRigidArea(new Dimension(10, 0));
JPanel main = new JPanel();
main.setLayout(new BoxLayout(main, BoxLayout.PAGE_AXIS));
add(background);
add(main);
main.setOpaque(false);
main.add(VERT_RA);
JPanel a = new JPanel();
a.setLayout(new BoxLayout(a, BoxLayout.LINE_AXIS));
main.add(a);
main.add(VERT_RA);
a.add(HORI_RA);
JPanel services = new JPanel();
services.setLayout(new BoxLayout(services, BoxLayout.PAGE_AXIS));
a.add(services);
a.add(HORI_RA);
JPanel right = new JPanel();
right.setLayout(new BoxLayout(right, BoxLayout.PAGE_AXIS));
a.add(right);
a.add(HORI_RA);     
JLabel lbl = new JLabel("SERVIZI");
lbl.setFont(new Font("SansSerif", Font.BOLD, 30));
lbl.setAlignmentX(Component.CENTER_ALIGNMENT);
lbl.setPreferredSize(new Dimension(100, 100));      
services.add(lbl);

but if I run it I can see only the "main" JPanel (the "SERVIZI" label). I can only see background JPanel if I specify a setSize(x,y) method.

Is there any way to add a background image to my layout, without having to specify dimensions?

I also tried with setLayou(null) but i had to specify dimensions for all components by hand (not useful).

Answer 1

You simply have to override the getPreferredSize() method for the respective JPanel, and make it return some valid Dimension Object. I guess this example might can help you in that direction :

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

public class PaintingExample
{
    private CustomPanel contentPane;
    private JTextField userField;
    private JPasswordField passField;
    private JButton loginButton;

    private void displayGUI()
    {
        JFrame frame = new JFrame("Painting Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = new CustomPanel();        

        frame.setContentPane(contentPane);
        frame.pack();
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new PaintingExample().displayGUI();
            }
        });
    }
}

class CustomPanel extends JPanel
{
    private BufferedImage image;

    public CustomPanel()
    {
        setOpaque(true);
        setBorder(BorderFactory.createLineBorder(Color.BLACK, 5));
        try
        {
            /*
             * Since Images are Application Resources,
             * it's always best to access them in the
             * form of a URL, instead of File, as you are doing.
             * Uncomment this below line and watch this answer
             * of mine, as to HOW TO ADD IMAGES TO THE PROJECT
             * https://stackoverflow.com/a/9866659/1057230
             * In order to access images with getClass().getResource(path)
             * here your Directory structure has to be like this
             *                 Project
             *                    |
             *         ------------------------
             *         |                      |
             *        bin                    src
             *         |                      |
             *     ---------             .java files             
             *     |       |                   
             *  package   image(folder)
             *  ( or              |
             *   .class        404error.jpg
             *   files, if
             *   no package
             *   exists.)
             */
            //image = ImageIO.read(
            //      getClass().getResource(
            //              "/image/404error.jpg"));
            image = ImageIO.read(new URL(
                        "http://gagandeepbali.uk.to/" + 
                                "gaganisonline/images/404error.jpg"));
        }
        catch(IOException ioe)
        {
            System.out.println("Unable to fetch image.");
            ioe.printStackTrace();
        }
    }

    /*
     * Make this one customary habbit,
     * of overriding this method, when
     * you extends a JPanel/JComponent,
     * to define it's Preferred Size.
     * Now in this case we want it to be 
     * as big as the Image itself.
     */
    @Override
    public Dimension getPreferredSize()
    {
        return (new Dimension(image.getWidth(), image.getHeight()));
    }

    /*
     * This is where the actual Painting
     * Code for the JPanel/JComponent
     * goes. Here we will draw the image.
     * Here the first line super.paintComponent(...),
     * means we want the JPanel to be drawn the usual 
     * Java way first, then later on we will
     * add our image to it, by writing the other line,
     * g.drawImage(...).
     */
    @Override
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.drawImage(image, 0, 0, this);
    }
}

But if you don't want to use inheritance, in your case, then you can simply add your image to the JLabel and then add your components to the JLabel by setting the Layout for the JLabel, as shown in this example and this example.

Answer 2

You can use OverlayLayout. It lets you stack components one on each other. Adding an image as the lowest one like this should work:

JPanel backgroundPanel = new JPanel();
backgroundPanel.setLayout(new OverlayLayout(backgroundPanel));

backgroundPanel.add(/* your panel with controls */);
backgroundPanel.add(/* image component */);

Note that your panel with controls should be transparent not to hide the background image. You can achieve this by setting panel.setOpaque(false);

Answer 3

You can do something like this:

Image image = new ImageIcon(path);     
JLabel label=new JLabel(image);

I think that might do the job you want, if you want to use a JLabel as background Image.

Anyways, you might want to take a look at the ImageIcon Javadoc aswell.