Develop Reference

how to do auto-resizing drawings in JPanel?

what's the easiest way to have a drawing in a JPanel that resizes whenever the user resizes the JFrame?
I know that I can auto resize the panel with a BorderLayout but the drawings are not resized in this case. I am new to java and GUI programming and there are probably numerous solutions.
please give me a hint into the right direction to make e.g. the rectangle in
import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.*;
public class DrawRect extends JPanel {
#Override
protected void paintComponent(Graphics g) {
g.drawRect(20, 20, 100, 100);
}
public static void main(String[] args) {
JFrame frame = new JFrame();
DrawRect panel = new DrawRect();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setPreferredSize(new Dimension(200, 200));
frame.getContentPane().add(panel);
frame.pack();
frame.setVisible(true);
}
}
auto-resizing whenever the frame is resized.

Provide positions and sizes as a proportion of the width and height of the panel. Whenever the panel is resized, the rendering engine will schedule a call to the paintComponent() method and the rectangle will be drawn proportionally. E.G.
import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.*;
public class DrawRect extends JPanel {
#Override
protected void paintComponent(Graphics g) {
int w = getWidth();
int h = getHeight();
g.drawRect(w/10, h/10, w/2, h/2);
}
/* A custom component should give the layout manager hints as to
its preferred size. */
#Override
public Dimension getPreferredSize() {
return new Dimension(200,200);
}
public static void main(String[] args) {
JFrame frame = new JFrame();
DrawRect panel = new DrawRect();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(panel);
frame.pack();
frame.setVisible(true);
}
}

frame.getContentPane().setLayout(new BorderLayout());
Insert the line before you add the component to the GUI.
You should study layoutmanagers, since it is a unique concept in Java.

Why my image doesn't load on contentPane except on CENTER?

I am currently still learning Java GUI and stumped on this problem. I just wonder why can't i load it anywhere except on center and how do i load my image anywhere else?
import java.awt.*;
import javax.swing.*;
public class GUI {
public static void main(String[] args) {
GUI gui = new GUI();
gui.go();
}
public void go() {
JFrame frame = new JFrame();
JPanel panel = new JPanel();
Player player = new Player();
panel.setBackground(Color.darkGray);
JButton button = new JButton("shock me");
panel.add(button);
frame.getContentPane().add(BorderLayout.EAST, panel);
frame.getContentPane().add(BorderLayout.NORTH, player);
//frame.getContentPane().add(BorderLayout.CENTER, player);
frame.setSize(200,200);
frame.setVisible(true);
}
}
Here's my player class
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.util.Random;
import javax.swing.*;
public class Player extends JPanel{
public void paintComponent(Graphics g) {
Image image = new ImageIcon("Source/hero.jpg").getImage();
g.drawImage(image, 3, 4 , this);
}
}

Player does not override getPreferredSize() to return a value. Since it does not do that, the BorderLayout will not assign it any height in the PAGE_START or PAGE_END constraints, and no width in the LINE_START and LINE_END constraints. The component is being added, it just has no width/height.
The CENTER will stretch both a component's width and height to the available space, that is why it is visible there.

Trouble with borders

I'm trying to get clarification as to how borders work, specifically the insets, and in searching through the Java docs and numerous websites I can't seem to find a clear explanation. Looking at this code:
import java.awt.AlphaComposite;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.EmptyBorder;
public class ShadowWindow {
public static void main(String[] args) {
new ShadowWindow();
}
public ShadowWindow() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame("Testing");
frame.setUndecorated(true);
frame.setBackground(new Color(0, 0, 0, 0));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setContentPane(new ShadowPane());
JPanel panel = new JPanel(new GridBagLayout());
panel.add(new JLabel("Look ma, no hands"));
frame.add(panel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class ShadowPane extends JPanel {
public ShadowPane() {
setLayout(new BorderLayout());
setOpaque(false);
setBackground(Color.BLACK);
setBorder(new EmptyBorder(0, 0, 10, 10));
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
g2d.fillRect(10, 10, getWidth(), getHeight());
g2d.dispose();
}
}
}
The way I interpret it this is what is happening:
JFrame frame (200 x 200) is created
JPanel shadowPane is created (also 200 x 200) with an empty border of 10 pixels created on the inside bottom and inside right of the JPanel
A second JPanel is created (200 x 200) and added on top of shadowPane
A rectangle is drawn (200 x 200) starting at x = 10 and y = 10
So my question in how is the shadowPane going past the range of the JFrame? Does the border go 10 pixels outside the JFrame or does it exist inside the JFrame. From everything I've found it should be inside, but that doesn't make sense based on how this code generates a shadow behind the frame. can anybody walk me through this? Thanks.

So my question in how is the shadowPane going past the range of the JFrame?
It's not. pack determines the preferred layout size of the content and makes the window big enough to accommodate it, because the frame is undercoated AND it's background is transparent, it "appears" as if the shadow hangs past the frame, it's an illusion.
The empty border is making sure that content added to the ShadowPane is "forced" into a small space.
Lets change the code slightly...
JFrame frame = new JFrame("Testing");
JPanel content = new JPanel(new BorderLayout());
content.setBackground(Color.RED);
//frame.setUndecorated(true);
//frame.setBackground(new Color(0, 0, 0, 0));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setContentPane(content);
//frame.setContentPane(new ShadowPane());
JPanel panel = new JPanel(new GridBagLayout());
panel.add(new JLabel("Look ma, no hands"));
ShadowPane shadowPane = new ShadowPane();
shadowPane.add(panel);
frame.add(shadowPane);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
What this does, is creates a new background panel, filled with the color red. It also adds the window decoration back in.
As you can see, the shadow pane and the label are are all rendered within the confines of the window.
If we once again remove the window decoration...
You can see that it's still the same...
So what's going on?
getPreferredSize is providing the core information about how the component would like to be size (in this case 200x200)
The EmptyBorder is defining a usable space within the ShadowPane which defines an area within which content can be displayed, it's leaving 10 pixels to the right and bottom of the component, in which components can't be displayed. This is take care of automatically by the layout manager. This means that the ShadowPane can actually paint here itself, but components added to it will never be displayed here, hence the shadow board.
Basically, it's smoke and mirrors and used to generate the illusion of a drop shadow behind the content added to the frame (or the ShadowPane in this case)

How do I change the position of JLabel or any other Component I add?

I am trying to create a translucent window which has no border or background other than the JLabel image's I put in it, using OverlayLayout and an extended JPanel...
My problem is when I try to add more components over the one I initially added which would be the background, I have no idea how to enable changing of the new components position.. x,y etc...
Please if possible show me what I can do and don't just point me to layoutmanagers, I need an example please if anyone is willing to show me.
Or better yet, show me what I need to do to my code in order to get the desired effect.. like changing "text" (A JLabel) position to be 10,10 ... x and y.
package core;
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.LayoutManager;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JWindow;
import javax.swing.OverlayLayout;
public class App {
// Window & Panel...
public JWindow frame;
public TranslucentPanel panel;
// OverlayLayout
public LayoutManager overlay;
// Components
public JLabel bg;
public JLabel test;
// Constructor
public App() {
try {
// Basics...
frame = new JWindow();
frame.setBackground(new Color(0, 0, 0, 0));
// Overlay
panel = new TranslucentPanel();
overlay = new OverlayLayout(panel);
panel.setLayout(overlay);
frame.setContentPane(panel);
// initComponents
initComponents();
// Finalize Frame
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
catch(Exception e) {
e.printStackTrace();
}
}
// Initialize Additional Components
public void initComponents() throws Exception {
test = new JLabel("test");
test.setForeground(Color.WHITE);
frame.add(test);
bg = new JLabel(new ImageIcon(ImageIO.read(getClass().getResource("/ball.png"))));
frame.add(bg);
// What must I do to be able to do this???
test.setLocation(10, 0);
}
// TranslucentPanel Class...
public class TranslucentPanel extends JPanel {
private static final long serialVersionUID = 1L;
public TranslucentPanel() {
setOpaque(false);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(0.0f));
g2d.setColor(getBackground());
g2d.fillRect(0, 0, getWidth(), getHeight());
}
}
}

One way would be to discard the Overlayout manager, set the TranslucentPanel's layout manager to something like BorderLayout and use the JLabel, bg as a container in of itself...
bg = new JLabel(new ImageIcon(ImageIO.read(getClass().getResource("/ball.png"))));
frame.add(bg);
// Set the layout of the JLabel
bg.setLayout(new GridBagLayout());
test = new JLabel("test");
test.setForeground(Color.WHITE);
// Add the test label to the bg JLabel...
bg.add(test);
Personally, I don't like this, as JLabel doesn't take into consideration the components (or the layout manager) when it makes it's calculations for it's preferred size.
Personally, I would create a custom background component that was responsible for painting the background image. Then, onto this, I would place the other components, using what ever combination of components and layout managers I need to produce the desired results.
Pixel perfect layouts are an illusion within modern UI design. There are too many factors which affect the individual size of components, none of which you can control. Swing was designed to work with layout managers at the core, discarding these will lead to no end of issues and problems that you will spend more and more time trying to rectify

After reading the following pieces from your codes :
// What must I do to be able to do this???
test.setLocation(10, 0);
If I understand correctly , you want to arrange position of your component based on custom coordinates. If so then You can use Insets class http://docs.oracle.com/javase/7/docs/api/java/awt/Insets.html to achieve that.
So you can set position of your component according to position you want
Insets insets = panel.getInsets();
Dimension size =test.getPreferredSize();
// just replace 10 & 0 according to X & Y postion you want.
test.setBounds(10 + insets.left, 0 + insets.top,size.width, size.height);
Here is you modified version:
*Note that I don't have your Icon , so I just put text on your label to help you see the result.
import java.awt.*;
import javax.swing.*;
public final class App{
// Window & Panel...
public JWindow frame;
public TranslucentPanel panel;
// OverlayLayout
public LayoutManager overlay;
// Components
public JLabel bg;
public JLabel test;
// Constructor
public App() {
try {
// Basics...
frame = new JWindow();
// Overlay
// Overlay
panel = new TranslucentPanel();
overlay = new OverlayLayout(panel);
panel.setLayout(overlay);
frame.add(panel);
initComponents();
// Finalize Frame
frame.pack();
frame.setSize(400,400);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
catch(Exception e) { e.printStackTrace();}
}
// Initialize Additional Components
public void initComponents() throws Exception {
test = new JLabel("test");
test.setForeground(Color.RED);
panel.setLayout(null);
panel.add(test);
Insets insets = panel.getInsets();
Dimension size =test.getPreferredSize();
test.setBounds(10 + insets.left, 0 + insets.top,
size.width, size.height);
frame.add(panel);
}
// TranslucentPanel Class...
class TranslucentPanel extends JPanel {
private static final long serialVersionUID = 1L;
public TranslucentPanel() {
setOpaque(false);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g.create();
g2d.setComposite(AlphaComposite.SrcOver.derive(0.0f));
g2d.setColor(getBackground());
g2d.fillRect(0, 0, getWidth(), getHeight());
}
}
public static void main (String args []){
App ap = new App();
}
}
The output :
If you declare your position as test.setBounds(500 + insets.left, 10 + insets.top,size.width, size.height); then the output would be :

JPanel and JFrame are different sizes

In the code below, I create a JFrame, set the size to 800 by 800 pixels, set the layout to BorderLayout, then add a JPanel.
In the JPanel, I use paintComponent to draw a 20x20 pixel image in 7 locations.
At position 0-0, the icon appears in the upper right corner.
The icon is 20 pixels high, and the frame and panel are both 800 pixels high, so drawing the icon at x-780 should align the icon with the bottom of the window. But the icond doesn't even appear.
The remaining icons are drawn a x-770, x-760, x-758, and x-750. x-758 appears aligned with the bottom of the window. So I conclude that x[0] on the JPanel start at the JFrame's x[42]
I think I've set the BorderLayout correctly. I do call setSize() in the JPanel's constructor. I thought setting an explicit size might screw it up. But after commenting that line out, the program shows the same behavior.
Can you show me what I'm doing wrong?
Frametest.java
package frametest;
import java.awt.BorderLayout;
import javax.swing.JFrame;
public class FrameTest extends JFrame{
public static final int HEIGHT = 800;
public static final int WIDTH = 800;
public FrameTest(){
setLayout(new BorderLayout());
add(new Panel(WIDTH, HEIGHT), BorderLayout.CENTER);
pack();
setTitle("Frame Test");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(WIDTH, HEIGHT);
setResizable(false);
setLocationRelativeTo(null);
setVisible(true);
}
public static void main(String[] args) {
new FrameTest();
}
}
Panel.java
package frametest;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JPanel;
public class Panel extends JPanel{
private int height;
private int width;
Image icon1 = new ImageIcon(this.getClass().getResource("icon1.png")).getImage(); //Note that the png file is 20 x 20 pixels.
public Panel(int width, int hieght){
setBackground(Color.BLUE);
//setSize(width, hieght);
}
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(icon1, 0, 0, this); //appears in the upper-right corner
g2d.drawImage(icon1, 20, 780, this); //does not appear
g2d.drawImage(icon1, 40, 770, this); //appears with bottom pixels cut off
g2d.drawImage(icon1, 70, 760, this); //appears with the bottom pixels cut off
g2d.drawImage(icon1, 100, 758, this); //appears aligned with bottom of the window
g2d.drawImage(icon1, 130, 750, this); //appears slightly above the bottom of the window
g2d.drawImage(icon1, 780, 20, this); //appears aligned with the right side of the screen.
}
}

You are setting the size of the JFrame. This includes the Frame Decoration, the Menu Bar (if you have one), and so on. If you want your JPanel to have the Dimensions 800 x 800, set the preferred Size of your JPanel and use JFrame.pack().
To do so, remove the following line from Frametest.java:
setSize(WIDTH, HEIGHT);
Then, in Panel.java, change this line from
//setSize(width, hieght);
to:
setPreferredSize(new Dimension(800, 800));
Instead of this, you can also overwrite getPreferredSize():
public Dimension getPreferredSize ()
{
return new Dimension(800, 800);
}

Use frame.pack() (as you are already using) instead of frame.setSize() that fits the components as per component's preferred size. Just remove setSize() calls.
Override getPreferredSize() to set the preferred size of the JPanel in case of custom painting.
sample code:
class Panel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
...
}
#Override
public Dimension getPreferredSize() {
return new Dimension(..., ...);
}
}

It sounds like the problem is because of the border around the JFrame. Things like the menu bar at the top will take away some space from the available space to display things in the JFrame.
Try adding getPreferredSize() to your JPanel, and calling pack() on your JFrame.