How can I put 2 java swing elements on top of each other?

Question

so I have this project that I'm doing, which draws a circle and a square, and resizes them through buttons. Everything works great, however what I must do is put the circle inside the square, so that the circle is inscribed, and I can't seem to figure out how to put both swing elements on top of each other. Here's a picture of how it currently is:

And here's a photoshop version of how it should look like:

Here's my Circle class:

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import java.beans.PropertyVetoException;
import java.beans.VetoableChangeListener;

public class Picture extends Canvas implements VetoableChangeListener, PropertyChangeListener {
    private final int SIZE = 100;
    private int radius = 1;

    public Picture() {
        setSize(SIZE,SIZE);
    }

    public void vetoableChange(PropertyChangeEvent pce) throws PropertyVetoException {
        if ((pce.getPropertyName()).equals("value")) {
            int v = (Integer)pce.getNewValue();
            if ((v <=0)||(v > SIZE/2))
                throw new PropertyVetoException ("Value out of bounds!", pce);        
        }   
    }


    public void propertyChange(PropertyChangeEvent pce) {
        if ((pce.getPropertyName()).equals("value")) {
            setRadius((Integer)pce.getNewValue());
            repaint(); 
        }
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    public int getRadius() {
        return this.radius;
    }

    public void paint (Graphics g) {
        Dimension d = getSize();
        g.setColor(Color.GREEN);
        g.fillOval(d.width/2 - radius, d.height/2 - radius, radius*2, radius*2);
    }

}

And here's my Square class, which is similar:

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import java.beans.PropertyVetoException;
import java.beans.VetoableChangeListener;


public class Square extends Canvas implements VetoableChangeListener, PropertyChangeListener {
    private final int SIZE = 100;
    private int side = 1;
    public Square() {
        setSize(SIZE,SIZE);
    }

    public void vetoableChange(PropertyChangeEvent pce) throws PropertyVetoException {
        if ((pce.getPropertyName()).equals("value")) {
            int v = (Integer)pce.getNewValue();
            if ((v <=0)||(v > SIZE/2))
                throw new PropertyVetoException ("Value out of bounds!", pce);        
        }   
    }

    public void propertyChange(PropertyChangeEvent pce) {
        if ((pce.getPropertyName()).equals("value")) {
            setSide((Integer)pce.getNewValue());
            repaint();
        }
    }

    public void setSide(int side) {
        this.side = side;
    }

    public int getSide() {
        return this.side;
    }

    public void paint (Graphics g) {
        Dimension d = getSize();
        g.setColor(Color.BLUE);
        g.drawRect(d.width/2 - side, d.height/2 - side, side*2, side*2);
    }

}

I've added both of them to the palette. Would you please explain to me how to put those both elements on top of each other, I'm new to Swing and JavaBeans.

Thanks in advance!

Answer 1

First of all you should not be extending Canvas, that is an AWT component. In Swing you can extend JComponent (or JPanel) and then you add custom painting to the paintComponent(...) method. Read the section from the Swing tutorial on Custom Painting for more information.

Also you should make each component transparent (by using setOaque(false) in the constructor of the component so that the background of one component does not cover the other.

I've added both of them to the palette.

And they both display on top of the palette because of the rules of the layout manager being used:

So you have a couple of options:

1. Take advantage of Swings parent/child relationship. That is add the square to the palette and the circle to the square. This means you will need to set a layout manager on the square so you can add the circle to it. A BorderLayout might be easy to use.

2. Create a panel using the OverlayLayout. This layout manager allows you to add two components on top of one another in the same panel. You would add the square to the panel and the circle to the panel (in that order since Swing paints the last component added to a panel first).

3. A completely different (and probably easier) option is to have a single component and paint both the square and circle in the paintComponent() method.