How to have an image as JPanel Background?

  • (2 Pages)
  • +
  • 1
  • 2

20 Replies - 1436 Views - Last Post: 04 April 2013 - 07:16 PM Rate Topic: -----

#16 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8315
  • View blog
  • Posts: 31,836
  • Joined: 06-March 08

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 01:18 PM

It works with JPanel with a background image holding JComponent

But your trick does not work if you want the JComponent themselve having a background image
On this example, wher je JPanel does not have any background, the Text of the JButton disappears even if the background of the JButton shows the image

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

public class ImageBackgroundPanel extends JPanel { 
	private Image background;

	public ImageBackgroundPanel() {
		loadImage();
		setPreferredSize(new Dimension(background.getWidth(null), background.getHeight(null)));
		buildGui();
	}

	private void loadImage() {
		try {
			Image temp = ImageIO.read(getClass().getResource("back.jpg"));
			//image is too small, so let's resize it.
			background = temp.getScaledInstance(temp.getWidth(null) * 2, temp.getHeight(null) * 2, Image.SCALE_SMOOTH);
		} catch(IOException e) {
			e.printStackTrace();
		} 
	}

	private void buildGui() {
		//instantiate ui components.
		JButton label = new MyButton("This is a button");
		add(label);
	}

	
	class MyButton extends JButton {
		MyButton(String txt) {
			super(txt);
		}
		@Override
		public void paintComponent(Graphics g) {
			g.drawImage(background, 0, 0 , getWidth(), getHeight(), null);
		}
	}
}


Was This Post Helpful? 0
  • +
  • -

#17 farrell2k  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 797
  • View blog
  • Posts: 2,423
  • Joined: 29-July 11

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 03:39 PM

It's not a trick. It's how swing painting works. It's supposed to work that way. Anyway, how did we go from JPanel to other components?
Was This Post Helpful? 0
  • +
  • -

#18 DarrenKingUS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-April 13

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 03:49 PM

Thank you guys so much!
I love this site,
I appreciate your help, the both of you.
Was This Post Helpful? 0
  • +
  • -

#19 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8315
  • View blog
  • Posts: 31,836
  • Joined: 06-March 08

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 05:38 PM

View Postfarrell2k, on 04 April 2013 - 06:39 PM, said:

Anyway, how did we go from JPanel to other components?

My fault, I apologise
That will teach me not to try to provide a general solution... each JComponent has its own characteristics that are surely known by all GUI builders.
So I am still curious to know how to that with a GUI builder ? Let say, for JPanel and fro JLabel just as example :)
Was This Post Helpful? 0
  • +
  • -

#20 farrell2k  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 797
  • View blog
  • Posts: 2,423
  • Joined: 29-July 11

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 06:51 PM

View Postpbl, on 05 April 2013 - 12:38 AM, said:

View Postfarrell2k, on 04 April 2013 - 06:39 PM, said:

Anyway, how did we go from JPanel to other components?

My fault, I apologise
That will teach me not to try to provide a general solution... each JComponent has its own characteristics that are surely known by all GUI builders.
So I am still curious to know how to that with a GUI builder ? Let say, for JPanel and fro JLabel just as example :)


It's the same. You still create subclass JPanel or JComponent and just draw the background in paintComponent() just as you would do normally. In Netbeans I would then just drag the subclass from what you would call the "file explorer" (in Eclipse), and place it on top of a JFrame. As you know, Netbeans then creates a bunch of nonsense code in GroupLayout. :) That's it.

public class CustomLabel extends JLabel { //change JLabel to JButton and you get a clikable Frame. :)/>
	
	private Image background;
    private JButton button;
    private JList<String> list;
    private JTextField textField;
    private JLabel label;
    private JTextArea textArea;
    private JComboBox<Integer> comboBox;
	
	public CustomLabel() {
		loadImage();
		buildGui();
		setPreferredSize(new Dimension(background.getWidth(null), background.getHeight(null)));
	}
	
	private void loadImage() {
		try {
			background = ImageIO.read(getClass().getResource("back.png"));
		}catch(IOException e) {
			e.printStackTrace();
		}
	}
	
	private void buildGui() {
		/*
		 * Works here, too, in case we decide we do not want to override paintComponent().
		 * The only problem with tis is that when the window is maximized, the background
		 * images des not fill.
		 */
		//setIcon(new ImageIcon(background));
		
		setLayout(new BorderLayout());
		
		//instantiate ui components.
        button = new JButton("Click");
        list = new JList<>(new String[] {"Does", "it", "work?"});
        textField = new JTextField();
        textField.setText("Yes it does!");
        label = new JLabel("I rule, as usual.");
        textArea = new JTextArea(10,10);
        textArea.setText("Yeah, it works...");
        comboBox = new JComboBox<>(new Integer[] {0,1,2,3,4,5,6,7,8,9});
        
		//the border regions.
		JPanel northPanel = new JPanel() {
            {
                setOpaque(false);
                ((FlowLayout)getLayout()).setHgap(10);
                add(button);
                add(list);
            }
        };
        
        JPanel southPanel = new JPanel() {
            {
                setOpaque(false);
                ((FlowLayout)getLayout()).setHgap(10);
                add(textField);
                add(label);
            }
        };
        
        JPanel eastPanel = new JPanel() {
            {
                setOpaque(false);
                ((FlowLayout)getLayout()).setHgap(10);
                add(textArea);
                add(comboBox);
            }
        };

        JPanel westPanel = new JPanel() {
            {
                setOpaque(false);
                ((FlowLayout)getLayout()).setHgap(10);
                add(new JButton("Button 1"));
                add(new JButton("Button 2"));
            }
        };
        
        JPanel centerPanel = new JPanel() {
            {
                setPreferredSize(new Dimension(100,100));
            }
            
            public void paintComponent(Graphics graphics) {
                Graphics2D g = (Graphics2D)graphics;
                g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, .25f));
                g.setColor(Color.green);
                g.fillRect(0, 0, getWidth(), getHeight());
            }
        };
        
        //add the panels to their respective borders.
        add(centerPanel, BorderLayout.CENTER);
        add(northPanel, BorderLayout.NORTH);
        add(southPanel, BorderLayout.SOUTH);
        add(eastPanel, BorderLayout.EAST);
        add(westPanel, BorderLayout.WEST);
	}
	
	//Does it also work if we override paintComponent?
	public void paintComponent(Graphics g) {
		g.drawImage(background, 0, 0, getWidth(), getHeight(), null);
	}
}


This post has been edited by farrell2k: 04 April 2013 - 07:07 PM

Was This Post Helpful? 0
  • +
  • -

#21 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8315
  • View blog
  • Posts: 31,836
  • Joined: 06-March 08

Re: How to have an image as JPanel Background?

Posted 04 April 2013 - 07:16 PM

I quit :v:
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2