Adding an image to a frame by button press

Question

I am trying to implement an image appearing when a button is pressed. For this purpose I thought I could just copy the concept of button 4 (which works) and exchange the System.exit(0) with code to add an image, but while I've been able to use that code elsewhere successfully, here it does not seem to work.

import java.awt.EventQueue;
import javax.swing.JFrame;
import java.awt.FlowLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JComboBox;
import javax.swing.JSpinner;
import java.awt.Color;
import java.util.ArrayList;

public class Mainframe {

    private JFrame frmOceanlife;

    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    Mainframe window = new Mainframe();
                    window.frmOceanlife.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the application.
     */
    public Mainframe() {
        initialize();
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        frmOceanlife = new JFrame();
        frmOceanlife.setTitle("OceanLife");
        frmOceanlife.setBounds(100, 100, 750, 600);
        frmOceanlife.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frmOceanlife.getContentPane().setLayout(null);
        
        
        JButton btnNewButton_4 = new JButton("Quit");
        btnNewButton_4.setBounds(640, 6, 81, 29);
        frmOceanlife.getContentPane().add(btnNewButton_4);
        
        btnNewButton_4.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
                    }
                });
                
        
        JButton btnNewButton_5 = new JButton("Einfügen");
        btnNewButton_5.setBounds(410, 34, 103, 29);
        frmOceanlife.getContentPane().add(btnNewButton_5);
        
        btnNewButton_5.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                ImageIcon icon = new ImageIcon("Stone.png");
                JLabel label = new JLabel(icon);
                // label.setBounds(25,25,50,50);
                frmOceanlife.getContentPane().add(label);
                
            }
        });
        
        JPanel panel = new JPanel();
        panel.setBackground(Color.WHITE);
        panel.setBounds(70, 75, 600, 450);
        panel.setLayout(new FlowLayout());
        JLabel piclabel = new JLabel(new ImageIcon("underwater-600x450.png"));
        panel.add(piclabel);
        frmOceanlife.getContentPane().add(panel);
        
        
        JLabel lblNewLabel_2 = new JLabel("Welcome to Oceanlife - Your Ocean size is 600x450!");
        lblNewLabel_2.setBounds(6, 539, 334, 16);
        frmOceanlife.getContentPane().add(lblNewLabel_2);
    }
}

Answer 1

The problem is that you are creating a new JLabel and trying to add it to the frame, once the button is pressed. Instead, you should just change the Icon of the label that is already added to the frame (i.e., piclabel), using piclabel.setIcon(icon);. So, you should declare picLabel at the start of your code, so that it can be accessible in the actionPerformed method of your button.

public class Mainframe {

    private JFrame frmOceanlife;
    JLabel piclabel;
...

Then, instantiate the label in the initialize() method as below:

...
panel.setBounds(70, 75, 600, 450);
panel.setLayout(new FlowLayout());
piclabel = new JLabel(new ImageIcon("underwater-600x450.png"));
...

Finally, your actionPerformed method for btnNewButton_5 (please consider using descriptive names instead) should look like this:

btnNewButton_5.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        ImageIcon icon = new ImageIcon("Stone.png");
        piclabel.setIcon(icon);
        
    }
}); 

Update

If, however, what you want is to add a new JLabel each time, and not change the icon of the existing one, you could use Box object with BoxLayout added to a ScrollPane. Then add the ScrollPane to your JFrame. Working example is shown below, based on the code you provided (again, please consider using descriptive names and removing unecessary code):

import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.*;
import javax.swing.*;

public class Mainframe {
    
    private JFrame frmOceanlife;
    Box box;
    JScrollPane scrollPane;
    
    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    Mainframe mf = new Mainframe();
                    mf.initialize();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        
        JButton insertBtn = new JButton("Einfügen");
        insertBtn.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                ImageIcon icon = new ImageIcon("Stone.png");
                JLabel label = new JLabel(icon);
                box.add(Box.createRigidArea(new Dimension(0, 5)));// creates space between the JLabels
                box.add(label);
                frmOceanlife.repaint();
                frmOceanlife.revalidate();
                Rectangle bounds = label.getBounds();
                scrollPane.getViewport().scrollRectToVisible(bounds);// scroll to the new image

            }
        });

        JButton quitBtn = new JButton("Quit");
        quitBtn.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                System.exit(0);
            }
        });

        box = new Box(BoxLayout.Y_AXIS);
        JLabel piclabel = new JLabel(new ImageIcon("underwater-600x450.png"));
        box.add(piclabel);
        
        scrollPane = new JScrollPane(box);
        Dimension dim = new Dimension(box.getComponent(0).getPreferredSize());
        scrollPane.getViewport().setPreferredSize(dim);
        scrollPane.getVerticalScrollBar().setUnitIncrement(dim.height);
        scrollPane.getViewport().setBackground(Color.WHITE);

        JPanel controlPanel = new JPanel();
        controlPanel.setLayout(new FlowLayout());
        controlPanel.add(insertBtn);
        controlPanel.add(quitBtn);
        
        JLabel titleLbl = new JLabel("Welcome to Oceanlife - Your Ocean size is 600x450!", SwingConstants.CENTER);
       
        frmOceanlife = new JFrame();
        frmOceanlife.getContentPane().add(titleLbl, BorderLayout.NORTH);
        frmOceanlife.getContentPane().add(scrollPane, BorderLayout.CENTER);
        frmOceanlife.getContentPane().add(controlPanel, BorderLayout.SOUTH);
        frmOceanlife.setTitle("OceanLife");
        frmOceanlife.pack();
        frmOceanlife.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frmOceanlife.setLocationRelativeTo(null);
        frmOceanlife.setVisible(true);

    }
}

Answer 2

Here is a sample application demonstrating the use of CardLayout. Note that I used [Eclipse] WindowBuilder. All the below code was generated by WindowBuilder apart from the ActionListener implementations. Also note that the ActionListener implementation for quitButton uses a lambda expression while the insertButton implementation uses a method reference.

More notes after the code.

import java.awt.EventQueue;

import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import javax.swing.JLabel;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;

import javax.swing.ImageIcon;
import javax.swing.JButton;

public class MainFram {

    private JFrame frame;
    private JPanel cardsPanel;
    private JPanel firstPanel;
    private JLabel firstLabel;
    private JPanel secondPanel;
    private JLabel secondLabel;
    private JPanel buttonsPanel;
    private JButton insertButton;
    private JButton quitButton;

    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                try {
                    MainFram window = new MainFram();
                    window.frame.setVisible(true);
                }
                catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the application.
     */
    public MainFram() {
        initialize();
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        frame = new JFrame();
        frame.setBounds(100, 100, 450, 300);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(getCardsPanel(), BorderLayout.CENTER);
        frame.getContentPane().add(getButtonsPanel(), BorderLayout.SOUTH);
    }

    private JPanel getCardsPanel() {
        if (cardsPanel == null) {
            cardsPanel = new JPanel();
            cardsPanel.setLayout(new CardLayout(0, 0));
            cardsPanel.add(getFirstPanel(), "first");
            cardsPanel.add(getSecondPanel(), "second");
        }
        return cardsPanel;
    }

    private JPanel getFirstPanel() {
        if (firstPanel == null) {
            firstPanel = new JPanel();
            firstPanel.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));
            firstPanel.add(getFirstLabel());
        }
        return firstPanel;
    }

    private JLabel getFirstLabel() {
        if (firstLabel == null) {
            firstLabel = new JLabel("");
            firstLabel.setIcon(new ImageIcon(getClass().getResource("underwater-600x450.png")));
        }
        return firstLabel;
    }

    private JPanel getSecondPanel() {
        if (secondPanel == null) {
            secondPanel = new JPanel();
            secondPanel.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));
            secondPanel.add(getLabel_1());
        }
        return secondPanel;
    }

    private JLabel getLabel_1() {
        if (secondLabel == null) {
            secondLabel = new JLabel("");
            secondLabel.setIcon(new ImageIcon(getClass().getResource("Stone.png")));
        }
        return secondLabel;
    }

    private JPanel getButtonsPanel() {
        if (buttonsPanel == null) {
            buttonsPanel = new JPanel();
            buttonsPanel.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));
            buttonsPanel.add(getInsertButton());
            buttonsPanel.add(getQuitButton());
        }
        return buttonsPanel;
    }

    private JButton getInsertButton() {
        if (insertButton == null) {
            insertButton = new JButton("Einfügen");
            insertButton.addActionListener(this::insertAction);
        }
        return insertButton;
    }

    private JButton getQuitButton() {
        if (quitButton == null) {
            quitButton = new JButton("Quit");
            quitButton.addActionListener(e -> System.exit(0));
        }
        return quitButton;
    }

    private void insertAction(ActionEvent event) {
        CardLayout cardLayout = (CardLayout) cardsPanel.getLayout();
        cardLayout.next(cardsPanel);
    }
}

The above code requires that the image files, i.e. underwater-600x450.png and Stone.png, be located in the same directory as file MainFram.class. Refer to How to Use Icons.

When you click on the insertButton, the panel containing the underwater-600x450.png image is hidden and the panel containing the Stone.png image is displayed. Clicking the insertButton a second time will hide Stone.png and display underwater-600x450.png. In other words, clicking the insertButton toggles the images.

Answer 3

The first thing to do is using layout managers instead of setting bounds manually:

import java.awt.*;
import javax.swing.*;

public class Mainframe {
    
    /**
     * Launch the application.
     */
    public static void main(String[] args) {
        EventQueue.invokeLater(() -> {
            try {
                new Mainframe();
            } catch (Exception e) {
                e.printStackTrace();
            }
        });
    }

    /**
     * Create the application.
     */
    public Mainframe() {
        initialize();
    }

    /**
     * Initialize the contents of the frame.
     */
    private void initialize() {
        JFrame frmOceanlife = new JFrame();
        frmOceanlife.setTitle("OceanLife");
        //frmOceanlife.setBounds(100, 100, 750, 600);
        frmOceanlife.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //frmOceanlife.getContentPane().setLayout(null);
        frmOceanlife.setLayout(new BoxLayout(frmOceanlife.getContentPane(), BoxLayout.PAGE_AXIS));

        JButton btnNewButton_4 = new JButton("Quit");
        btnNewButton_4.addActionListener(e -> System.exit(0));
        //btnNewButton_4.setBounds(640, 6, 81, 29);
        JPanel quitPanel = new JPanel();
        quitPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));
        quitPanel.add(btnNewButton_4);
        frmOceanlife.getContentPane().add(quitPanel);

        JPanel stonesPanel = new JPanel();
        frmOceanlife.getContentPane().add(stonesPanel);

        JButton btnNewButton_5 = new JButton("Insert");
        //btnNewButton_5.setBounds(410, 34, 103, 29);
        btnNewButton_5.addActionListener(e -> {
            ImageIcon icon = new ImageIcon("Stone.png");
            JLabel label = new JLabel(icon);
            //label.setBounds(25,25,50,50);
            stonesPanel.add(label);
            frmOceanlife.revalidate();
        });

        JPanel insertPanel = new JPanel();
        insertPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        insertPanel.add(btnNewButton_5);
        frmOceanlife.getContentPane().add(insertPanel);

        JPanel panel = new JPanel();
        panel.setBackground(Color.WHITE);
        //panel.setBounds(70, 75, 600, 450);
        panel.setLayout(new FlowLayout());
        panel.setPreferredSize(new Dimension(700,550));

        JLabel piclabel = new JLabel(new ImageIcon("underwater-600x450.png"));
        panel.add(piclabel);
        frmOceanlife.getContentPane().add(panel);

        JLabel lblNewLabel_2 = new JLabel("Welcome to Oceanlife - Your Ocean size is 600x450!");
        //lblNewLabel_2.setBounds(6, 539, 334, 16);
        JPanel infoPanel = new JPanel();
        infoPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        infoPanel.add(lblNewLabel_2);
        frmOceanlife.getContentPane().add(infoPanel);
        frmOceanlife.pack();
        frmOceanlife.setVisible(true);
    }
}

Next, let's introduce better names and use publicly available images to make the code more readable and more of an mre:

import java.awt.*;
import java.net.*;
import javax.swing.*;

public class Mainframe {

    private static final String STONE = "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/32x32/Circle_Red.png",
                        OCEAN ="https://media-gadventures.global.ssl.fastly.net/media-server/dynamic/blogs/posts/robin-wu/2014/12/PB110075.jpg";
    public Mainframe() {
        initialize();
    }

    private void initialize() {
        JFrame frmOceanlife = new JFrame();
        frmOceanlife.setTitle("OceanLife");
        frmOceanlife.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frmOceanlife.setLayout(new BoxLayout(frmOceanlife.getContentPane(), BoxLayout.PAGE_AXIS));

        JButton quitBtn = new JButton("Quit");
        quitBtn.addActionListener(e -> System.exit(0));
        JPanel quitPanel = new JPanel();
        quitPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));
        quitPanel.add(quitBtn);
        frmOceanlife.getContentPane().add(quitPanel);

        JPanel stonesPanel = new JPanel();
        frmOceanlife.getContentPane().add(stonesPanel);

        JButton insertBtn = new JButton("Insert");
        insertBtn.addActionListener(e -> {

            try {
                ImageIcon icon = new ImageIcon(new URL(STONE));
                JLabel stoneLbl = new JLabel(icon);
                stonesPanel.add(stoneLbl);
                frmOceanlife.revalidate();
            } catch (MalformedURLException ex) {
                ex.printStackTrace();
            }
        });

        JPanel insertPanel = new JPanel();
        insertPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        insertPanel.add(insertBtn);
        frmOceanlife.getContentPane().add(insertPanel);

        JPanel oceanPanel = new JPanel();
        oceanPanel.setBackground(Color.WHITE);
        oceanPanel.setLayout(new FlowLayout());
        oceanPanel.setPreferredSize(new Dimension(700,550));

        try {
            JLabel oceanLbl = new JLabel(new ImageIcon(new URL(OCEAN)));
            oceanPanel.add(oceanLbl);
        } catch (MalformedURLException ex) {
            ex.printStackTrace();
        }

        frmOceanlife.getContentPane().add(oceanPanel);

        JLabel infoLabel = new JLabel("Welcome to Oceanlife - Your Ocean size is 600x450!");
        JPanel infoPanel = new JPanel();
        infoPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        infoPanel.add(infoLabel);
        frmOceanlife.getContentPane().add(infoPanel);
        
        frmOceanlife.pack();
        frmOceanlife.setVisible(true);
    }

    public static void main(String[] args) {
       //no change in main 
    }
}

And add some final touchups :

public class Mainframe {

    private static final String STONE = "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/32x32/Circle_Red.png",
                        OCEAN ="https://media-gadventures.global.ssl.fastly.net/media-server/dynamic/blogs/posts/robin-wu/2014/12/PB110075.jpg";

    private ImageIcon oceanIcon;

    public Mainframe() {
        initialize();
    }

    private void initialize() {
        JFrame frmOceanlife = new JFrame();
        frmOceanlife.setTitle("OceanLife");
        frmOceanlife.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frmOceanlife.setLayout(new BoxLayout(frmOceanlife.getContentPane(), BoxLayout.PAGE_AXIS));

        JButton quitBtn = new JButton("Quit");
        quitBtn.addActionListener(e -> System.exit(0));
        JPanel quitPanel = new JPanel();
        quitPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));
        quitPanel.add(quitBtn);
        frmOceanlife.getContentPane().add(quitPanel);

        JPanel stonesPanel = new JPanel();
        JLabel stoneLbl = new JLabel();
        stonesPanel.add(stoneLbl);
        frmOceanlife.getContentPane().add(stonesPanel);

        JButton insertBtn = new JButton("Insert");

        insertBtn.addActionListener(e -> {

            try {
                ImageIcon icon = new ImageIcon(new URL(STONE));
                stoneLbl.setIcon(icon);
            } catch (MalformedURLException ex) {
                ex.printStackTrace();
            }
        });

        JPanel insertPanel = new JPanel();
        insertPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        insertPanel.add(insertBtn);
        frmOceanlife.getContentPane().add(insertPanel);

        try {
            oceanIcon = new ImageIcon(new URL(OCEAN));
        } catch (MalformedURLException ex) {
            ex.printStackTrace();
        }

        JLabel oceanLbl = new JLabel();
        oceanLbl.setIcon(oceanIcon);
        JPanel oceanPanel = new JPanel(){
            @Override
            public Dimension getPreferredSize() {
                return new Dimension(oceanIcon.getIconWidth()+100, oceanIcon.getIconHeight());
            };
        };
        oceanPanel.add(oceanLbl);
        oceanPanel.setBackground(Color.WHITE);
        oceanPanel.setLayout(new GridBagLayout()); //center image in panel
        frmOceanlife.getContentPane().add(oceanPanel);

        JLabel infoLabel = new JLabel("Welcome to Oceanlife - Your Ocean size is "+oceanIcon+oceanIcon.getIconWidth()+
                "x"+oceanIcon.getIconHeight()+"!");
        JPanel infoPanel = new JPanel();
        infoPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        infoPanel.add(infoLabel);
        frmOceanlife.getContentPane().add(infoPanel);

        frmOceanlife.pack();
        frmOceanlife.setVisible(true);
    }

    public static void main(String[] args) {
      //no change in main
    }
}