Search code examples
javaswingpaneljlayeredpanejlayer

Component layering Java Swing, Layers showing on hover


I have two JPanels layered on top of each other in the same container. I am using container.add(jpanel, 0); and container.add(otherjpanel, 1). It works fine however in order for the top layer to show I have to hover over the components with the mouse.

Here is some executable code showing my problem.

Just hover mouse on upper part of screen.

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.event.*;
import javax.swing.*;
import javax.swing.text.*;
import java.io.*;
import java.util.*;

public class test {

    public static void main(String args[]) {
        try {
            UIManager.setLookAndFeel(UIManager.getCrossPlatformLookAndFeelClassName());
        } catch (Exception e) {
        }
        JFrame frame = new GUIframe();
        frame.setVisible(true);
        frame.setResizable(false);
    }
}

class GUIframe extends JFrame{

    public GUIframe(){
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setPreferredSize(new Dimension(300,400));
        setSize(300, 400);

        JLayeredPane content = new JLayeredPane();
        content.setPreferredSize(new Dimension(300,400));
        content.setSize(300,400);

        JPanel board = new JPanel();
        for (int i = 0;i<5;i++){
            JButton button = new JButton("button");
            board.add(button);
        }
        content.add(new ImagePanel());
        this.add(content);
        this.add(board);
    }
}

class ImagePanel extends JPanel {
    private Image img;
    String imageLocation = "image location here";

    ImagePanel() {
        img = new ImageIcon(imageLocation).getImage();
        setPreferredSize(new Dimension(300,400));
        setSize(300,400);
        setLayout(null);
        setOpaque(false);
    }

    public void paint(Graphics g){
        super.paint(g);
        g.drawImage(img, 0, 0, this);
    }
}

Solution

  • A contentPane's layout is by default BorderLayout. Have you changed this? Perhaps you should set your contentPane to be a JLayeredPane instead.

    If anything about this recommendation is unclear, please leave a comment.

    Edit 1: Example of JLayeredPane
    You could solve this sort of thing with a layered pane as I described, something like listed below, but you must take care to set size and to make overlying JPanels non-opaque:

    import java.awt.Dimension;
    import java.awt.Graphics;
    import java.awt.Image;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.net.MalformedURLException;
    import java.net.URL;
    
    import javax.imageio.ImageIO;
    import javax.swing.*;
    
    public class Test2 {
       private static final int LP_WIDTH = 450;
       private static final int LP_HEIGHT = 600;
       private static final String IMAGE_SITE = "http://upload.wikimedia.org/wikipedia/"
             + "commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/"
             + "660px-Laser_Towards_Milky_Ways_Centre.jpg";
       private JLayeredPane layeredPanel = new JLayeredPane();
    
       public Test2() {
          layeredPanel.setPreferredSize(new Dimension(LP_WIDTH, LP_HEIGHT));
          try {
             URL url = new URL(IMAGE_SITE);
             BufferedImage image = ImageIO.read(url);
             ImagePanel2 imagePanel2 = new ImagePanel2(image);
             imagePanel2.setSize(layeredPanel.getPreferredSize());
    
             JPanel buttonPanel = new JPanel();
             buttonPanel.setOpaque(false);
             for (int i = 0; i < 8; i++) {
                buttonPanel.add(new JButton("Button"));
             }
             buttonPanel.setSize(layeredPanel.getPreferredSize());
    
             layeredPanel.add(imagePanel2, JLayeredPane.DEFAULT_LAYER);
             layeredPanel.add(buttonPanel, JLayeredPane.PALETTE_LAYER);
          } catch (MalformedURLException e) {
             e.printStackTrace();
             System.exit(-1);
          } catch (IOException e) {
             e.printStackTrace();
             System.exit(-1);
          }
       }
    
       private JComponent getMainComponent() {
          return layeredPanel;
       }
    
       private static void createAndShowGui() {
          Test2 test2 = new Test2();
    
          JFrame frame = new JFrame("Test2");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.getContentPane().add(test2.getMainComponent());
          frame.pack();
          frame.setLocationByPlatform(true);
          frame.setVisible(true);
       }
    
       public static void main(String[] args) {
          SwingUtilities.invokeLater(new Runnable() {
             public void run() {
                createAndShowGui();
             }
          });
       }
    }
    
    class ImagePanel2 extends JPanel {
       private Image image;
    
       public ImagePanel2(Image image) {
          this.image = image;
       }
    
       @Override
       protected void paintComponent(Graphics g) {
          super.paintComponent(g);
          if (image != null) {
             g.drawImage(image, 0, 0, null);
          }
       }
    
    }
    

    However if all you want is a background image, then that's what I'd do, create a JPanel that uses a background image, and then add stuff to it.

    import java.awt.*;
    import java.awt.image.*;
    import java.io.IOException;
    import java.net.MalformedURLException;
    import java.net.URL;
    
    import javax.imageio.ImageIO;
    import javax.swing.*;
    
    public class Test3 extends JPanel {
       private static final int LP_WIDTH = 450;
       private static final int LP_HEIGHT = 600;
       private static final String IMAGE_SITE = "http://upload.wikimedia.org/wikipedia/"
             + "commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/"
             + "660px-Laser_Towards_Milky_Ways_Centre.jpg";
    
       private BufferedImage image;
    
       public Test3() {
          try {
             URL url = new URL(IMAGE_SITE);
             image = ImageIO.read(url);
    
             for (int i = 0; i < 8; i++) {
                add(new JButton("Button"));
             }
          } catch (MalformedURLException e) {
             e.printStackTrace();
             System.exit(-1);
          } catch (IOException e) {
             e.printStackTrace();
             System.exit(-1);
          }
       }
    
       @Override
       public Dimension getPreferredSize() {
          return new Dimension(LP_WIDTH, LP_HEIGHT);
       }
    
       @Override
       protected void paintComponent(Graphics g) {
          super.paintComponent(g);
          if (image != null) {
             g.drawImage(image, 0, 0, null);
          }
       }
    
       private static void createAndShowGui() {
          Test3 mainPanel = new Test3();
    
          JFrame frame = new JFrame("Test3");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.getContentPane().add(mainPanel);
          frame.pack();
          frame.setLocationByPlatform(true);
          frame.setVisible(true);
       }
    
       public static void main(String[] args) {
          SwingUtilities.invokeLater(new Runnable() {
             public void run() {
                createAndShowGui();
             }
          });
       }
    }