Develop Reference

Component not being painted on top of Jpanel

If I paint directly on the frame, it shows up fine but the ship will not show up on top of the panel...
package MoonBlast;
import java.awt.BorderLayout;
import java.awt.Dimension;
import javax.swing.JFrame;
public class Frame extends JFrame{
PlaySpace p;
Ship s;
public Frame(String title){
this.setTitle(title);
this.setSize(800, 800);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
p = new PlaySpace();
s = new Ship();
p.add(s);
this.add(p, BorderLayout.CENTER);
this.setVisible(true);
}
}
package MoonBlast;
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JPanel;
public class PlaySpace extends JPanel {
public PlaySpace(){
super();
this.setPreferredSize(new Dimension(800, 800));
this.setBackground(Color.BLACK);
}
}
package MoonBlast;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Polygon;
import javax.swing.JComponent;
public class Ship extends JComponent{
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Polygon p = new Polygon();
p.addPoint(350, 750);
p.addPoint(450, 750);
p.addPoint(400, 700);
g.setColor(Color.YELLOW);
g.fillPolygon(p);
}
}
The only class I left out was the 1 line viewer class. I have tried everything I could think of and a few more people have looked at it too. Thanks in advance.

You need to override the getPreferredSize() method of your Ship class to return the size of the component. Every Swing component is responsible for knowing its preferred size since it is the component that is doing the custom painting.
but the ship will not show up on top of the panel...
Your PlaySpace class using a FlowLayout by default which respects the preferred size of any component added to it. By default the preferred size of the Ship is (0, 0) so there is nothing to paint.
If I paint directly on the frame, it shows up fine
The default layout manager of the content pane of the frame is a BorderLayout. When you add a component to the CENTER of a BorderLayout, the layout ignores the preferred size of the component and just makes the component take up all the available space in the frame.
Read the section from the Swing tutorial on Layout Managers for more information and working examples of each layout manager.

How can I add an image to a panel

edit// my question is simpler than the other one so please just answer here. the other question looks too complicated for me to understand.
I want to add an image to a panel, but not sure how it's done. I don't want to do it from the design page because I didn't Design my panel I only coded it to show up. so does anyone know what code I need to add for an image to show up on there? and where do I save the image so that it can be included. here is the code I've done so far
JFrame frame = new JFrame("JButton");
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(500,200);
JPanel panel = new JPanel();
frame.add(panel);
JButton button = new JButton("London");
panel.add(button);
JLabel label = new JLabel("Click", JLabel.CENTER);

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.JPanel;
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, this); // see javadoc for more info on the parameters
}
}

All you need to do is,
Read image file.
Draw image to background with help of Graphics object.
just replace JPanel panel = new JPanel(); with below code.
JPanel panel = new JPanel() {
#Override
protected void paintComponent(Graphics g) {
Image image = null;
try {
image = ImageIO.read(new URL("https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"));
} catch (IOException e) {
e.printStackTrace();
}
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
};

Alright, there are 2 ways to add your image:
Using custom painting by overriding JPanel#paintComponent(...) method.
Using a JLabel to display the image and applying to it various layout managers to get the desired GUI.
I'm going to expand on how to use the 1st way with some comments in the code, the original idea was given in this answer so, be sure to give credits to the author.
You need to either:
Create a custom JPanel object
Create a class that extends JPanel
In any case you need to override the paintComponent(...) method.
Later, in that paintComponent() method you need to draw the image using Graphics#drawImage(...) method. This will make the JPanel to draw the image as the background.
After that you should override your JPanel's getPreferredSize() method, so you can call JFrame#pack(), which will resize your JFrame's size to its preferred size (which is the minimum size where all your components are visible).
After doing that, you can easily add components as you've always done:
panel.add(...);
And the second way is to make a JLabel to act as a Container, where you can add more Components to it (just like you do in a JPanel) (As shown in this answer)
The way to do this is:
Create a JLabel with an ImageIcon
Set its layout manager
Add components to it
Depending on which one you choose you have some differences:
Using the custom painting option, you need to take care of the preferred size of your container but you have more control over your component. However the image will fill all the space available on the window.
Using the JLabel option you can simply call pack() on your JFrame and it will resize to the image size, but if your image is too big your JFrame will be the same size too. If you resize your window to be shorter the image will be cropped and show "white" space if you make your window bigger.
This is how the image looks like with the 2 options, on the left the custom painting, on the right the label approach. At first they both look the same...
But... If we resize the window, this is what we get:
I like the custom painting approach more, but it depends on your needs and likes.
The code that produces the above output is:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.BorderFactory;
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class JPanelWithBackgroundImageExample {
private JFrame frame; //Our window
private JPanel panel; //The panel where we're going to draw the background image
private Image image;
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new JPanelWithBackgroundImageExample().createAndShowGui();
}
});
}
public void createAndShowGui() {
frame = new JFrame(getClass().getSimpleName());
try {
image = ImageIO.read(new URL("https://i.stack.imgur.com/XZ4V5.jpg")); //We read the image from the Internet
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
panel = new JPanel() { //We need to open the curly braces so we can change the default behavior of the JPanel
/*
* This method is the one that paints the background, by default it paints it with gray color,
* so, we need to tell it to draw an image instead. (This method belongs to JPanel already, so we need to add
* "#Override" before it, so the compiler knows we're overriding it
*/
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g); //Never forget this line or you could break the paint chain
/*
* This method belongs to the Graphics class and draws an image, this is what we want the JPanel to draw as our background
* The parameters are: the image to be drawn, the starting position (x, y) coords, the width and height and the observer
*/
g.drawImage(image, 0, 0, this.getWidth(), this.getHeight(), this);
}
/*
* This method is part of the JPanel, we're overriding it's preferred size and return the size we want
*/
#Override
public Dimension getPreferredSize() {
return new Dimension(300, 200);
}
};
JLabel label = new JLabel(new ImageIcon(image)); //We create a JLabel that will act as a container for our components
panel.setBorder(BorderFactory.createLineBorder(Color.WHITE)); //We create a border just for visibility of both ways
label.setBorder(BorderFactory.createLineBorder(Color.WHITE)); //We create a border just for visibility of both ways
label.setLayout(new BoxLayout(label, BoxLayout.PAGE_AXIS)); //We set the layout manager for the label
label.add(new JLabel("I'm a label inside a label")); //We add a new label to our label (that is acting as a container)
label.add(new JButton("I'm a button inside a label")); //We add a button to our label (that is acting as a container)
//You can add your components to the panel, as you always do it
panel.add(new JButton("HEY! I'm a button!")); //We add a button to our jpanel
panel.add(new JLabel("Click the button next to me! :D")); //We add a label to our jpanel
frame.add(panel, BorderLayout.WEST); //We add the pane which has a size of 300 x 200 to the left part of our JFrame
frame.add(label, BorderLayout.EAST); //We add the label (which acts as a container / jpanel) to the right part of our JFrame
frame.pack(); //We pack the frame, so it takes its preferred size (and as we only added a single component to it (the JPanel)
//As the panel has a size of 300 x 200, the frame will also have this size
frame.setVisible(true); //We set the visibility of the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Now, as a general tip, place your program on the Event Dispatch Thread (EDT) by changing your main() method as follows:
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
//Your constructor here
}
});
}
And now, to answer your question in the comments:
everything works except the image because I don't have that image. so I copied an image url from google and pasted it in and it didn't appear? what can I do
Well, I think you took the code from the linked answer and changed this line:
frame.setContentPane(new JLabel(new ImageIcon("C:/Users/Frakcool/workspace/StackOverflowProjects/src/test/Air.jpg")));
To something like this:
frame.setContentPane(new JLabel(new ImageIcon("https://i.stack.imgur.com/XZ4V5.jpg")));
Well in that case, it's obvious that the code won't work that way, Swing doesn't know how to interpret a http in a String, but URL class does, and thus, you should change the above line like:
frame.setContentPane(new JLabel(new ImageIcon(new URL("https://i.stack.imgur.com/XZ4V5.jpg"))));
And import:
import java.net.URL;
In your class.
I hope this helps you in understanding how the code works, if not, well, I think you need to put more effort in understanding it.

JLayeredPane not showing my custom JPanel

I'm having trouble getting my custom panel to show up using JLayeredPanel. I'm currently trying to create a black rectangle on the first layer, and on the second layer, I have a custom JPanel which is a slideshow of images. The slideshow will not display at all, it only works when I add it to the frame. Any thoughts?
Code:
import java.awt.Color;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.Image;
import java.awt.Toolkit;
import java.util.ArrayList;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLayeredPane;
import javax.swing.JPanel;
public class GUI extends JFrame {
private Container pane;
private JPanel emptySlideShow;
private JLayeredPane layeredPane;
public GUI(){
this.setVisible(true);
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
this.setBounds(0,0,screenSize.width, screenSize.height);
// //Set up the content pane
// pane = this.getContentPane(); //get the content pane to place components
// pane.setLayout(null); //use absolute positioning (using Insets)
// pane.setBackground(new Color(236, 236, 236)); //color the background
//
// //Set up the main menu bar
this.emptySlideShow = new JPanel();
this.emptySlideShow.setBounds(0,0,(int)Toolkit.getDefaultToolkit().getScreenSize().getWidth(),250);
this.emptySlideShow.setBackground(new Color(0,0,0));
layeredPane = new JLayeredPane();
layeredPane.setLayout(null);
layeredPane.add(this.emptySlideShow,new Integer(0));
ArrayList<Image> slides = new ArrayList<Image>();
Image image1 = new ImageIcon("pictures/slide1.png").getImage();
slides.add(image1);
Image image2 = new ImageIcon("pictures/slide2.png").getImage();
slides.add(image2);
ArrayList<String> transitions = new ArrayList<String>();
transitions.add("PanLR");
transitions.add("FadeOut");
this.add(new SlideShow(slides,transitions));
layeredPane.add(new SlideShow(slides,transitions),new Integer(1));
this.add(layeredPane);
}
}

A guess since we don't have all of the pertinent code -- but you need to specify a component's size and position when adding it to the JLayeredPane, and so perhaps you're not setting the SlideShow's size before adding it (it's position will by default be 0, 0).
Question though: Why are you trying to add a SlideShow JPanel to the GUI twice? Once to the JLayeredPane, and the other to the JFrame itself?

Simple. You are adding the components (including JLayeredPane) to the frame AFTER you invoke
this.setVisible(true);
Move this line to the end of the constructor and you should be fine or if you really want to keep this line at the top, you should call revalidate() to update the JFrame and components.

Adding onResizeListener to JButton

I have a window(JFrame) which contains special types of JButtons (my own class of buttons which extend JButton). That window suppose to resize itself when the button size is changing(in example when I click on the button its font size increases and the whole size of JButton too).
I do not want make JFrame fit the buttons, but let me decide how big the window should be, so pack() is no solution.
I was thinking about a kind of component listner which would resize window on button size change but I could not find anything.
Code example(working, click the button):
import java.awt.Dimension;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Rectangle;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JOptionPane;
public class ResizingButton extends JButton {
public ResizingButton(String txt) {
super();
setText(txt);
addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent arg0) {
int newFontSize = getFont().getSize() + 1;
setFont(new Font(Font.SANS_SERIF, Font.PLAIN, newFontSize));
FontMetrics metrics = getFontMetrics(getFont());
int width = metrics.stringWidth(getText());
int height = metrics.getHeight();
Dimension newDimension = new Dimension(width + 40, height + 10);
setPreferredSize(newDimension);
setBounds(new Rectangle(getLocation(), getPreferredSize()));
}
});
}
}
import java.awt.FlowLayout;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
#SuppressWarnings("serial")
public class Zadanie2 extends JFrame {
JButton jb1, jb2;
public Zadanie2() {
createGUI();
}
private void createGUI() {
setSize(200, 80);
setLayout(new FlowLayout());
add(new ResizingButton("tekst"));
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String[] args) {
new Zadanie2();
}
}

That window suppose to resize itself when the button size is changing(in example when I click on the button its font size increases and the whole size of JButton too).
Override the getPreferredSize() of your custom button.
I do not want make JFrame fit the buttons, but let me decide how big the window should be, so pack() is no solution.
Now when you invoke pack() the frame will be resized taking into account the new preferred size of the button.
I was thinking about a kind of component listner which would resize window on button size change but I could not find anything.
The ComponentListener has a componentResized() event. So you would add the listener to the button. You would only use this approach if your automatic resizing code is different then just using pack().

see ComponentListener
ComponentListener firing one event per one pixel on resize
add Swing Timer if event to the Swing GUI will be done only once time, if resize ended
Swing Timer with small dealy 350-500ms, if resize still continue then to test Timer.isRunning, if return true then only Timer#restart(),

How do I draw over top of a JScrollPane?

I have a JScrollPane that fills a JPanel (which is the content pane for my JFrame). The JPanel performs custom drawing - however, it doesn't appear over top of the JScrollPane. Should I override something other than paintComponent?
Here is a demo:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.LayoutManager;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.SwingUtilities;
public class Test {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
// Create the frame.
JFrame frame = new JFrame();
frame.setPreferredSize(new Dimension(1024, 768));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel custom = new CustomPanel(new BorderLayout());
// Add the scroll pane.
JScrollPane scroll = new JScrollPane();
scroll.setBorder(BorderFactory.createLineBorder(Color.blue));
custom.add(scroll, BorderLayout.CENTER);
// Display the frame.
frame.setContentPane(custom);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
}
#SuppressWarnings("serial")
class CustomPanel extends JPanel {
public CustomPanel(LayoutManager lm) {
super(lm);
}
#Override
public void paintComponent(Graphics g) {
g.setColor(Color.red);
g.drawRect(200, 200, 200, 200);
}
}

I'd like for the paint on the JPanel to go over top of the paint on
the JScrollPane
you can to paint to the
JViewport as you can to see here and here
use JLayer(Java7) based on JXlayer(Java6)
very similair (as todays JLayer) is painting to GlassPane, notice GlassPane to consume()(by default) MouseEvent in the case there is(are) added some JComponent(s), GlassPane can to covers whole RootPane or only part of available Rectangle, depends of used LayoutManager and Dimension returns from layed JComponent(s)

Just a simple problem. You are adding the scrollpane to the custompanel which is hiding what your are drawing. Instead, consider intializing your scrollpane with the cutsompanel as its content.
Example:
JScrollPane scrlPane = new JScrollPane(customPanel);

when you add a single component to a BorderLayout and specify BorderLayout.CENTER, the component will expand to completely fill its parent. If the component is opaque, you won't be able to see any custom painting you are doing in the parent.

The way that worked (as #mKorbel suggested) is to play with the JViewport:
scroll.setViewport(new CustomViewPort());
where CustomViewPort is a class extending JViewport that overrides the paintComponent method.