How to make JButtons visible on a JPanel with an image as background

Question

I've made a JPanel with a image as background. But while loading the JPanel first time the rest of the added components but the image are not visible. After rolling the mouse over the image, the buttons become visible. How to make the JButtons visible along with the image as background while loading the panel.

Here is the piece of my code:

    contentPane = new JPanel();
    contentPane.setBorder(new SoftBevelBorder(BevelBorder.LOWERED, null, null, null, null));
    setContentPane(contentPane);
    contentPane.setLayout(null);

    homePanel.setBounds(10, 11, 959, 620);
    homePanel.setLayout(null);

    JPanel wizardPanel = new JPanel();
    wizardPanel.setBounds(10, 295, 545, 336);
    wizardPanel.setLayout(null);
    homePanel.add(wizardPanel);

    JLabel backgroundLabel;
    try {
        backgroundLabel = new JLabel(new ImageIcon(ImageIO.read(new File("images/nature.jpg"))));
        backgroundLabel.setBounds(0, 0, 545, 336);
        wizardPanel.add(backgroundLabel);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }


    JButton btnNewButton = new JButton("New button");
    btnNewButton.setBounds(309, 95, 89, 23);
    wizardPanel.add(btnNewButton);

    JButton btnNewButton_1 = new JButton("New button");
    btnNewButton_1.setBounds(309, 150, 89, 23);
    wizardPanel.add(btnNewButton_1);

    JButton btnNewButton_2 = new JButton("New button");
    btnNewButton_2.setBounds(309, 212, 89, 23);
    wizardPanel.add(btnNewButton_2);

Answer 1

It's a bad idea to place button over label. Better way is to paint image as panel background or to use JLayer. Here is an example for the first solution:

import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.LayoutManager;
import java.util.Objects;

import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

public class JImagePanel extends JPanel {

    private final Image image;

    private boolean scale;

    public JImagePanel(Image anImage) {
        image = Objects.requireNonNull(anImage);
    }

    public JImagePanel(Image anImage, LayoutManager aLayout) {
        super(aLayout);
        image = Objects.requireNonNull(anImage);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        final Image toDraw = scale? image.getScaledInstance(getWidth(), getHeight(), Image.SCALE_SMOOTH) : image;
        g.drawImage(toDraw, 0, 0, this);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public Dimension getPreferredSize() {
        if (isPreferredSizeSet()) {
            return super.getPreferredSize();
        } else {
            return new Dimension(image.getWidth(this), image.getHeight(this));
        }
    }

    public boolean isScale() {
        return scale;
    }

    public void setScale(boolean scale) {
        this.scale = scale;
    }


    public static void main(String[] args) throws Exception {
        SwingUtilities.invokeLater(new Runnable() {

            @Override
            public void run() {
                try {
                    final JImagePanel p = 
                            new JImagePanel(ImageIO.read(JImagePanel.class.getResource("myImage.png")), new FlowLayout());
                    p.setScale(true);
                    p.add(new JButton("Button"));
                    final JFrame frm = new JFrame("Image test");
                    frm.add(p);
                    frm.pack();
                    frm.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
                    frm.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

}

Answer 2

A quick solution might be directly setting JFrame content pane to the image and adding your components to the content pane of this JFrame. Assuming your code is from the body of a JFrame class. My suggestion would more or less look like this:

        JRootPane rootpane = new JRootPane();
        JPanel contentPane = new JPanel();
        contentPane.setBorder(new SoftBevelBorder(BevelBorder.LOWERED, null, null, null, null));
        rootpane.setContentPane(contentPane);
        contentPane.setLayout(null);

        JPanel homePanel = new JPanel();
        homePanel.setBounds(10, 11, 959, 620);
        homePanel.setLayout(null);

        JRootPane wizardPanel = new JRootPane();
        wizardPanel.setBounds(10, 295, 545, 336);
        wizardPanel.setLayout(null);

        JLabel backgroundLabel;
        try {
            File f = new File("D:\\work\\eclipse\\workspace_eclipse_4.4.1\\trialExamples\\src\\main\\images\\nature.jpg");
            backgroundLabel = new JLabel(new ImageIcon(ImageIO.read(f)));
            backgroundLabel.setBounds(0, 0, 545, 336);
            wizardPanel.setContentPane(backgroundLabel);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        JButton btnNewButton = new JButton("New button");
        btnNewButton.setBounds(309, 95, 89, 23);
        wizardPanel.getContentPane().add(btnNewButton);

        JButton btnNewButton_1 = new JButton("New button");
        btnNewButton_1.setBounds(309, 150, 89, 23);
        wizardPanel.getContentPane().add(btnNewButton_1);

        JButton btnNewButton_2 = new JButton("New button");
        btnNewButton_2.setBounds(309, 212, 89, 23);
        wizardPanel.getContentPane().add(btnNewButton_2);

        homePanel.add(wizardPanel.getContentPane());

        add(homePanel);

Answer 3

this is crazy !! I got it working by placing the JButtons initialization code block above the Image loading portion it works .....

     package demo;

     import java.awt.EventQueue;
     import java.io.File;
     import java.io.IOException;

     import javax.imageio.ImageIO;
     import javax.swing.ImageIcon;
     import javax.swing.JButton;
     import javax.swing.JFrame;
     import javax.swing.JLabel;
     import javax.swing.JPanel;
     import javax.swing.SwingUtilities;
     import javax.swing.UIManager;
     import javax.swing.border.EmptyBorder;

public class demoframe extends JFrame {

/**
 * 
 */
private static final long serialVersionUID = 1436190962490331120L;

/**
 * Launch the application.
 */
public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
        public void run() {
            try {
                demoframe frame = new demoframe();

                UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
                SwingUtilities.updateComponentTreeUI(frame);

                frame.setVisible(true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    });
}

/**
 * Create the frame.
 */
public demoframe() {

    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setBounds(100, 100, 988, 678);
    JPanel contentPane = new JPanel();
    contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
    setContentPane(contentPane);
    contentPane.setLayout(null);

    JPanel panel = new JPanel();
    panel.setBounds(10, 11, 501, 361);
    contentPane.add(panel);
    panel.setLayout(null);

    JButton btnNewButton = new JButton("New button");
    btnNewButton.setBounds(322, 112, 89, 23);
    panel.add(btnNewButton);

    JButton button = new JButton("New button");
    button.setBounds(322, 172, 89, 23);
    panel.add(button);

    JButton button_1 = new JButton("New button");
    button_1.setBounds(322, 244, 89, 23);
    panel.add(button_1);

    JLabel backgroundLabel;
    try {
        backgroundLabel = new JLabel(new ImageIcon(ImageIO.read(new File("images/nature.jpg"))));
        backgroundLabel.setBounds(0, 0, 501, 361);
        panel.add(backgroundLabel);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }



    JPanel panel_1 = new JPanel();
    panel_1.setBounds(521, 11, 441, 361);
    contentPane.add(panel_1);

    JPanel panel_2 = new JPanel();
    panel_2.setBounds(10, 383, 952, 246);
    contentPane.add(panel_2);

}   
 }