Overlapping components in JPanel

Question

I have a JButton and a Point (it's motion controlled by leap motion) on the same JPanel. However, they are overlapping with JButton on top.

Is there a way to have my Point always on top in the JPanel application window?

Here's a code snippet:

public leapPanel()
{

    setLayout(null);        //18-12-13
    setBackground(Color.WHITE);
    setVisible(true);       //18-12-13
    button = new JButton();
    button.setBounds(100, 150, 100, 100);
    button.setBackground(Color.BLACK);
    add(button);

    points[nPoints] = new Point(PWIDTH/2, PHEIGHT/2);
    nPoints++;

    listener = new leapListener(this);
    controller = new Controller();
    controller.addListener(listener);       
}   

public Dimension getPreferredSize()
{   
    return new Dimension(PWIDTH, PHEIGHT); 
}

public void paintComponent(Graphics shape)
{
    super.paintComponent(shape);
    Graphics2D shaped = (Graphics2D)shape;
    shaped.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
    RenderingHints.VALUE_ANTIALIAS_ON);
    for(int i=0; i<nPoints; i++)
    {
        shaped.setColor(Color.ORANGE);
        shaped.fillOval(points[i].x, points[i].y, 12, 12);
    }
}

private Point2D.Float calcScreenNorm(Hand hand, Screen screen)
/* The dot position is calculated using the screen position that the
   user's hand is pointing at, which is then normalized to an (x,y)
   value between -1 and 1, where (0,0) is the center of the screen.
*/
{
    Vector palm = hand.palmPosition();
    Vector direction = hand.direction();
    Vector intersect = screen.intersect(palm, direction, true);
          // intersection is in screen coordinates

    // test for NaN (not-a-number) result of intersection
    if (Float.isNaN(intersect.getX()) || Float.isNaN(intersect.getY()))
          return null;

    float xNorm = (Math.min(1, Math.max(0, intersect.getX())) - 0.5f)*2;      // constrain to -1 -- 1
    float yNorm = (Math.min(1, Math.max(0, (1-intersect.getY()))) - 0.5f)*2; 

    return new Point2D.Float(xNorm, yNorm);
}  // end of calcScreenNorm()

Answer 1

I have a JButton and a Point (it's motion controlled by leap motion) on the same JPanel.

Not when components are on the same panel. The order of painting is to paint the component first (ie. your paintComponent() method is invoked). Then the child components of the panel are painted (ie. the button is painted). This is how Swing implements the parent/child relationship between components.

Try using two panels. The main panel will have a BorderLayout. Then you can use:

main.add(button, BorderLayout.NORTH);
main.add(leapPanel, BorderLayout.CENTER);

The other option is to try to use the OverlayLayout. It allows you to stack two components on top of one another, although I must admit I have problems controlling the exact location of components when using this layout. The basic code would be:

JPanel main = new JPanel();
main.setLayout( new OverlayLayout(main) );
JPanel buttonPanel = new JPanel();
buttonPanel.add( button );
main.add(buttonPanel);
main.add(leapPanel);

Using the OverlayLayout you may experience weird painting problems with the button. If so then check out the suggestion to override isOptimizedDrawingEnabled() from Overlap Layout.

Answer 2

 JPanel main = new JPanel();
    main.setLayout(new OverlayLayout(main));
    //main.setBackground(Color.WHITE);
    setSize(800, 600);  //18-12-13
    Container con = getContentPane();
    con.setBackground(Color.WHITE);  


    BPanel = new buttonPanel();
    panel = new leapPanel();
    main.add(BPanel);
    main.add(panel);    
    con.add(main);

This only allows me to show only BPanel on the application window. What i need is to have both the point(panel) and button(BPanel) to be displayed on the application window with the point always on top.

Correct me if i am missing something here. Thanks!