JFrame Back Ground Image that other buttons don

Question

This question already has an answer here:

• Setting background images in JFrame 4 answers

I want to add a background image to my frame.But when i add an image to my frame it was added successfully but other things like j label and buttons added on frame afterwords don't appear on frame. i have kept image on Desktop. below is my code

package UI;

import java.awt.BorderLayout;
import java.awt.EventQueue;

import java.awt.Color;
import java.io.File;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;
import java.awt.Font;
import javax.swing.JButton;
import java.awt.Insets;

public class EditTeamInterface extends JFrame {

    private JPanel contentPane;

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

                    //frame.getContentPane().setBackground(Color.white);
                    frame.setContentPane(new JLabel(new ImageIcon(ImageIO.read(new File("C:/Users/Abdullah/Desktop/cricketBackGround1.jpg")))));
                    frame.pack();
                    frame.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

    /**
     * Create the frame.
     */
    public EditTeamInterface() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setBounds(100, 100, 624, 356);
        contentPane = new JPanel();
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(contentPane);
        GridBagLayout gbl_contentPane = new GridBagLayout();
        gbl_contentPane.columnWidths = new int[]{0, 0, 0, 0, 0, 0, 0};
        gbl_contentPane.rowHeights = new int[]{0, 0, 0, 0, 0, 0, 0};
        gbl_contentPane.columnWeights = new double[]{0.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE};
        gbl_contentPane.rowWeights = new double[]{0.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE};
        contentPane.setLayout(gbl_contentPane);

        JLabel lblNewLabel = new JLabel("EDIT OPTIONS");
        lblNewLabel.setFont(new Font("SketchFlow Print", Font.BOLD, 18));
        GridBagConstraints gbc_lblNewLabel = new GridBagConstraints();
        gbc_lblNewLabel.insets = new Insets(0, 0, 5, 5);
        gbc_lblNewLabel.gridx = 0;
        gbc_lblNewLabel.gridy = 0;
        contentPane.add(lblNewLabel, gbc_lblNewLabel);

        JButton btnNewButton = new JButton("New button");
        GridBagConstraints gbc_btnNewButton = new GridBagConstraints();
        gbc_btnNewButton.gridx = 5;
        gbc_btnNewButton.gridy = 5;
        contentPane.add(btnNewButton, gbc_btnNewButton);
    }

}

Answer 1

In the EditTeamInterface's constructor, you set the content pane for the frame using setContentPane(contentPane);, but in the static void main, you replace it with

frame.setContentPane(new JLabel(new ImageIcon(ImageIO.read(new File("C:/Users/Abdullah/Desktop/cricketBackGround1.jpg")))));

This discards everything you did before for this new content...

Instead of EditTeamInterface extending from JFrame, change it so that it extends from JPanel

Create a new instance of a JFrame, set the content pane to your label and then add EditTeamInterface to the frame.

Because JLabel has no layout manager by default, you should call setLayout(new BorderLayout()) on the frame after you set it's content pane to the label

While, using a JLabel, this way will work, JLabel will NOT calculate it's preferred size based on the needs of it's contents, but rather based on the properties of the icon and text. This doesn't really make it suitable for this task.

A better solution is to use a custom JPanel and override it's paintComponent to render the image you want. If you're clever, you will make it so that this class is re-usable.

Something like this for example