JButton not showing up properly over GIF

Question

I have a program that's essentially supposed to be a title screen for a few games. The background is a GIF (I'm not sure if that's contributing to the problem), and I need to have some JButtons that allow for me to run the actual games. The problem is that the JButton only shows up sometimes when I hover over it (and for a split second, at that), otherwise it's invisible. It works just fine, goes to the game and all, it's just invisible.

I've tried to see if the problem is the fact that I'm using a GIF, as well as the paintComponent() method, although, it just didn't show up when I used a JPEG.

Here's the code:

public class TestingGrounds extends JFrame{
     //declarations
     JButton snakeButton;
     JPanel snakeButtonPanel;
     JFrame window;
     Container con;
     TitleScreenHandler tsHandler = new TitleScreenHandler();
     //constructor
     public TestingGrounds(){
          //main JFrame
          window = new JFrame("Title Screen");
          window.add(new ImagePanel());
          window.setResizable(false);
          window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          window.setSize(1831, 1030);
          window.setVisible(true);
          window.setLocationRelativeTo(null);
          window.setLayout(null);

          con = window.getContentPane();

          //panel for the button to go to the snake game
          snakeButtonPanel =  new JPanel();
          snakeButtonPanel.setBounds(100,100,600,150);

          //button to go to snake game
          snakeButton = new JButton("Snake");
          snakeButton.setBackground(Color.BLACK);
          snakeButton.setForeground(Color.WHITE);
          snakeButton.setFont(new Font("Times New Roman", Font.ITALIC, 30));
          snakeButton.addActionListener(tsHandler);
          snakeButton.setFocusPainted(false);
          //adding button to panel
          snakeButtonPanel.add(snakeButton);
          //adding panel to container
          con.add(snakeButtonPanel);
          //setting the panel as visible
          snakeButtonPanel.setVisible(true);

     }
     //main method for running constructor
     public static void main(String[] args) {
          new TestingGrounds();
     }

     //what to do if the button is pressed
     public class TitleScreenHandler implements ActionListener {
          public void actionPerformed(ActionEvent event){
               //goes to main game screen if start button is pressed
               new SnakeGame();
          }
     }
}
//class for using the gif
class ImagePanel extends JPanel {
     Image image;
     public ImagePanel() {
          image = Toolkit.getDefaultToolkit().createImage("C:/Users/eklut/Desktop/Coding/ICS4U1/src/graphicsstuff/snek/source.gif");
     }

     public void paintComponent(Graphics g) {
          super.paintComponent(g);
          g.drawImage(image, 0, 0, this);
     }
}

Sorry, I know it's a fair amount of code, but I feel like I have to show all of it as I'm not exactly sure where the problem stems from.

I expected the button to show up over the gif, but it almost seems like it's happening the other way around

Answer 1

This MCVE includes so many changes it's better to go through the code and look at the comments.

Note that the code uses an animated GIF as the BG. I would say that was used to explicitly demonstrate that it was a GIF, but the truth is that the page of example images only contains animated GIFs. The format is not much good for anything else, given a PNG will support translucency and a lot more colors than a GIF.

import java.awt.*;
import java.awt.event.*;
import java.net.MalformedURLException;
import javax.swing.*;
import java.net.URL;

//public class TestingGrounds extends JFrame {
public class TestingGrounds {

    //declarations
    JButton snakeButton;
    JPanel snakeButtonPanel;
    JFrame window;
    TitleScreenHandler tsHandler = new TitleScreenHandler();

    //constructor
    public TestingGrounds() {
        //main JFrame
        window = new JFrame("Title Screen");
        try {
            JPanel imagePanel = new ImagePanel();
            imagePanel.setLayout(new BorderLayout());
            window.add(imagePanel);
            //window.setResizable(false);
            window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            // Don't guess sizes needed. They will be wrong on other 
            // PLAFs or platforms.
            //window.setSize(850, 600);

            // should be last
            //window.setVisible(true);
            window.setLocationRelativeTo(null);
            //window.setLayout(null);

            //con = window.getContentPane();
            //panel for the button to go to the snake game
            snakeButtonPanel = new JPanel(new GridBagLayout());
            snakeButtonPanel.setOpaque(false);
            //snakeButtonPanel.setBounds(100, 100, 600, 150);

            //button to go to snake game
            snakeButton = new JButton("Snake");
            snakeButton.setMargin(new Insets(10,40,10,40));
            snakeButton.setBackground(Color.BLACK);
            snakeButton.setForeground(Color.WHITE);
            snakeButton.setFont(new Font("Times New Roman", Font.ITALIC, 30));
            snakeButton.addActionListener(tsHandler);
            snakeButton.setFocusPainted(false);
            //adding button to panel
            snakeButtonPanel.add(snakeButton);
            //adding panel to container
            //con.add(snakeButtonPanel);
            // Adding the container to imagePanel
            imagePanel.add(snakeButtonPanel);

            //setting the panel as visible
            snakeButtonPanel.setVisible(true);

            window.pack();
            window.setVisible(true);
        } catch (MalformedURLException ex) {
            ex.printStackTrace();
        }
    }

    //main method for running constructor
    public static void main(String[] args) {
        new TestingGrounds();
    }

    //what to do if the button is pressed
    public class TitleScreenHandler implements ActionListener {

        public void actionPerformed(ActionEvent event) {
            //goes to main game screen if start button is pressed
            //new SnakeGame();
            JOptionPane.showMessageDialog(snakeButton, "Snake Game");
        }
    }
}
//class for using the gif

class ImagePanel extends JPanel {

    Image image;

    public ImagePanel() throws MalformedURLException {
        image = Toolkit.getDefaultToolkit().createImage(
                new URL("https://i.stack.imgur.com/OtTIY.gif"));
        MediaTracker mt = new MediaTracker(this);
        mt.addImage(image, 1);
        try {
            mt.waitForAll();
        } catch (InterruptedException ex) {
            ex.printStackTrace();
        }
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(image, 0, 0, this);
    }

    @Override
    public Dimension getPreferredSize() {
        // this allows us to pack() the window around the image
        return (new Dimension(image.getWidth(this), image.getHeight(this)));
    }
}

Answer 2

I haven't tested your code but here are some things you need to change:

window.setVisible(true);
window.setLayout(null);

Those 2 lines are going to give you problems. Why?

1. The first one needs to be called AFTER you've added all the components to your window frame, not before (i.e. last line in your program). This is probably how you can solve your problem.

2. The second one... null layout is Evil! and frowned upon. Please take a look at How to use a Layout Manager you can even combine them. This is what happens if you use null layout and run your program in a different computer with different OS / PLAFs / screen resolution / etc.

3. There's no need to call:

   snakeButtonPanel.setVisible(true);
   

4. As per my comment above, if you're unsure if your problem is related or not to a GIF, then remove the GIF and test it, if it's not related, remove it from your question at all, if it is, keep it.

Answer 3

In addition to @Fracool's suggestions:

You do:

window.add(new ImagePanel());

which is the same as:

window.getContentPane().add(new ImagePanel());

Later you do:

con = window.getContentPane();
...
con.add(snakeButtonPanel);

Which means you are adding the "imagePanel" and "snakeButtonPanel" to the content pane.

When multiple components are added to the same panel, the last component added is painted first. So in this case the "snakeButtonPanel" is painted first and then the "imagePanel" is painted. You don't want to add two components to the content pane. You want to have a parent/child relationship between the background image and the button.

Also, there is no need for the "snakeButtonPanel", you can add the "snakeButton" directly.

So, instead of having a structure like:

- contentPane
    -imagePanel
    - snakeButtonPanel
        - snakeButton

You should have a structure like:

- contentPane
    -imagePanel
        - snakeButton

And the basic code would be like:

JButton snakeButton = new JButton(...);

JPanel imagePanel = new ImagePanel();
imagePanel.add( snakeButton );

window.add( imagePanel );

If you keep the default layout manager (which is a BorderLayout) then the image panel will fill the entire frame and the button will be positioned on the image panel based on the rules of the FlowLayout, which is the default layout manager for a JPanel.

public class TestingGrounds extends JFrame{

Don't extend JFrame. You are not adding new functionality to the JFrame class and the code in your constructor creates a JFrame, which is the frame you are adding all the components to.