Layered JLabels not working

Question

When I attempt to layer JLabels, the end result has them appearing next to each other, with the gif overlapping the logo image even though I told it to be on the bottom layer.

import java.awt.*;
import java.awt.event.ActionEvent;
import javax.swing.*;
import java.io.*;
class GameFrame extends JFrame
{
    ImageIcon logo, bg;
    JTextPane l1;
    JTextArea l2;
    JLabel i1, i2;
    JButton b1;
    GridBagLayout g;
    int count;
    JLayeredPane jlp;
    GameFrame() throws IOException, UnsupportedLookAndFeelException, ClassNotFoundException, InstantiationException, IllegalAccessException
    {
        super("Simple2.0");
        setSize(400, 250);
        //setResizable(false);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        count = 0;
        UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());

        jlp = new JLayeredPane();
        jlp.setSize(400, 250);
        jlp.setVisible(false);

        bg = new ImageIcon("fire.gif");
        i2 = new JLabel(bg);
        i2.setBackground(new Color(0, 0, 0, 0));
        i2.setVisible(false);
        logo = new ImageIcon("logo.png");
        i1 = new JLabel(logo);
        i1.setBackground(new Color(0, 0, 0, 0));
        i1.setVisible(false);

        g =  new GridBagLayout();
        GridBagConstraints gb = new GridBagConstraints();
        gb.gridy = 1;
        gb.insets = new Insets(10, 0, 0, 0);
        gb.anchor = GridBagConstraints.SOUTH;

        setLayout(g);

        l1 = new JTextPane();
        l1.setBackground(getBackground());
        l1.setEnabled(false);
        l1.setDisabledTextColor(Color.BLACK);
        l1.setSize(350, 200);
        l1.setText("Hello and welcome to SIMPLE!");

        l2 = new JTextArea();
        l2.setSize(350, 200);
        l2.setBackground(getBackground());
        l2.setEnabled(false);
        l2.setDisabledTextColor(Color.BLACK);
        l2.setLineWrap(true);
        l2.setWrapStyleWord(true);
        l2.setVisible(false);

        b1 = new JButton("continue");

        b1.addActionListener((ActionEvent e) ->
        {
        if(count == 0)
        {
            l1.setVisible(false);
            l2.setText("    This game was a rework of a text based game made by me and a friend of mine during our first semester in Java.");
            l2.setVisible(true);
            count++;
        }
        else if(count == 1)
        {
            l2.setText("    It was a simple attempt to make a combat and inventory system that would function within a Java operated terminal, and was"
                    + " full of bugs, errors, and long workarounds to problems that can now easily be solved with our new ability.");
            count++;
        }
        else if(count == 2)
        {
            l2.setVisible(false);
            l1.setText("And as such I present our new work, SIMPLE.");
            l1.setVisible(true);
            count++;
        }
        else
        {
            l1.setVisible(false);
            b1.setVisible(false);
            i1.setVisible(true);
            i2.setVisible(true);
            jlp.setVisible(true);
        }
    });

    jlp.add(i1, 0);
    jlp.add(i2, 1);
    add(l1);
    add(l2);
    add(i1);
    add(i2);
    add(b1, gb);
    add(jlp);
    setVisible(true);
}
}

Thanks in advance for any help!

edit: I added the specific layers but have not seen a change in the outcome, as blaring a problem as that would immediately seem.

Answer 1

Read the section from the Swing tutorial on How to Use Layered Panes for a working example that displays multiple layers on top of one another.

When you "add" the label to the layered pane, you need to specify the "layer" you want the label added to. The tutorial explains how the layering works.

Also, while looking at the tutorial look at the better way to structure your program so that:

1. the GUI is created on the Event Dispatch Thread
2. you don't extend JFrame.

It is better to start with the working example and then customize it slowly to your requirement.