Add image file to JPanel as Background?

Question

I use Netbeans IDE and created simple JFrame and filled with a JPanel. Also I added some components to this JPanel (for example: buttons, textfields)

I want to add a .jpg file to this JPanel as the background for it. But when I Clean & Build project, this .jpg file must be stored "images/back.jpg" where the Jar file is created.

I search over the Net but I can't find any useful examples. This is my first attempt and any help's appreciated.

public class MainFrame extends javax.swing.JFrame {

    public MainFrame() {
        initComponents();
    }

    private void initComponents() {
        jPanel1 = new javax.swing.JPanel();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

        javax.swing.GroupLayout jPanel1Layout = new javax.swing.GroupLayout(jPanel1);
        jPanel1.setLayout(jPanel1Layout);
        jPanel1Layout.setHorizontalGroup(
            jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 400, Short.MAX_VALUE)
        );
        jPanel1Layout.setVerticalGroup(
            jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 300, Short.MAX_VALUE)
        );

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
        );

        pack();
    }

    public static void main(String args[]) {

    // ** Look and feel setting code **

        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new MainFrame().setVisible(true);
            }
        });
    }
    private javax.swing.JPanel jPanel1;

}

My code as above. Only one JFrame filled with JPanel.

How can I implements below codes to my code?

possible duplicate of [How to add an image to a JPanel?](http://stackoverflow.com/questions/299495/how-to-add-an-image-to-a-jpanel) — icza, Aug 07 '14 at 14:27

score 2 · Accepted Answer · answered Aug 08 '14 at 08:17

This is the code you are looking for, as others have already suggested you need to create a custom component for your JPanel, override the paintComponent() and set the Image as background

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JPanel;

public class MainFrame extends javax.swing.JFrame {

    private javax.swing.JPanel jPanel1;

    public MainFrame() {
        initComponents();
    }

    private void initComponents() {

        jPanel1 = new ImagePanel();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

        javax.swing.GroupLayout jPanel1Layout = new javax.swing.GroupLayout(
                jPanel1);
        jPanel1.setLayout(jPanel1Layout);
        jPanel1Layout.setHorizontalGroup(jPanel1Layout.createParallelGroup(
                javax.swing.GroupLayout.Alignment.LEADING).addGap(0, 400,
                Short.MAX_VALUE));
        jPanel1Layout.setVerticalGroup(jPanel1Layout.createParallelGroup(
                javax.swing.GroupLayout.Alignment.LEADING).addGap(0, 300,
                Short.MAX_VALUE));

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(
                getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(layout.createParallelGroup(
                javax.swing.GroupLayout.Alignment.LEADING).addComponent(
                jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE,
                javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE));
        layout.setVerticalGroup(layout.createParallelGroup(
                javax.swing.GroupLayout.Alignment.LEADING).addComponent(
                jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE,
                javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE));

        pack();
    }

    public static void main(String args[]) {

        // Look and feel setting code**

        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new MainFrame().setVisible(true);
            }
        });
    }

    public class ImagePanel extends JPanel{

        private BufferedImage image;

        public ImagePanel() {
           try {                
              image = ImageIO.read(new File("image name and path"));
           } catch (IOException ex) {
                // handle exception...
           }
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.drawImage(image, 0, 0, null); // see javadoc for more info on the parameters            
        }

    }
}

In Netbeans GUI builder

Just right click on jPanel1
Properties
Code
Custom Creation Code
Paste new ImagePanel()

score 1 · Answer 2 · 2014-08-07T15:14:17.737

A little google would have helped.

public class JPanelDemo extends JPanel {
    /**
     * 
     */
     private static final long serialVersionUID = 1L;
     private static final Color BACKGROUND      = Color.black;
     private static final Color BACKGROUND_2    = Color.WHITE;
     String path="/images/back.jpg";

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g.create();        
        int midY = 100;
        Paint topPaint = new GradientPaint(0, 0, BACKGROUND,0, midY, BACKGROUND_2);
        graphics.setPaint(topPaint);
        graphics.fillRect(0, 0, getWidth(), midY);        
        Paint bottomPaint = new GradientPaint(0, midY + 1, BACKGROUND_2,0, getHeight(), BACKGROUND);
        graphics.setPaint(bottomPaint);
        graphics.fillRect(0, midY, getWidth(), getHeight());
        Image img = new ImageIcon(getClass().getResource(path)).getImage();
        int imgX = img.getWidth(null);
        int imgY = img.getHeight(null);
        graphics.drawImage(img, (getWidth() - imgX) / 2, (getHeight() - imgY) / 2, imgX, imgY, null);
      //  graphics.dispose();
    }
}

Hope it helps :)

Adam · Answer 3 · 2014-08-07T15:18:36.053

1

Image img = ImageIO.read(new File(*File name*));

protected void paintComponent(Graphics g)
{
   super.paintComponent(g);
   // paint the background image and scale it to fill the entire space
   g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
}

Here you go :) JPanel edit- You can set the background in this way. Then build all other components in front of this image.

edited Aug 07 '14 at 15:18

answered Aug 07 '14 at 14:31

Adam

2,422
18
29

How can i implement these codes to my project i don know. Because all components created by Netbeans GUI Builder drag&create :( I try many things but i dont :( – Black White Aug 07 '14 at 18:14
You should be able to go into the designer code still? – Adam Aug 07 '14 at 18:15
If you can find the designer window/code go into the code and add these two lines in their respective places. You should be able to hit View -> Designer, I use Eclipse though so I'm not sure. Its been a while since I've used Netbeans xD – Adam Aug 07 '14 at 18:20

score 0 · Answer 4 · answered Aug 07 '14 at 15:17

Check this link. http://www.java2s.com/Code/Java/Swing-JFC/Panelwithbackgroundimage.htm

class ImagePanel extends JPanel {

  private Image img;

  public ImagePanel(String img) {
    this(new ImageIcon(img).getImage());
  }

  public ImagePanel(Image img) {
    this.img = img;
    Dimension size = new Dimension(img.getWidth(null), img.getHeight(null));
    setPreferredSize(size);
    setMinimumSize(size);
    setMaximumSize(size);
    setSize(size);
    setLayout(null);
  }

  public void paintComponent(Graphics g) {
    g.drawImage(img, 0, 0, null);
  }

}

Add image file to JPanel as Background?

4 Answers4