Why does my paintComponent method paint over my JButton? How can I make a JPanel have both a JButton and graphics on it?

Question

I am using two JPanels with a cardLayout, both being added onto a contentPane. There is one JButton on each of the panels that switch to the other panel but on my gridPanel, which has graphics on it, they seem to cover the JButton and although it still works when you click where it's position is, it is invisible. How do I get a JPanel that has both graphics on it and a JButton? Thank you so much for all of your help

Main Class:

public class ProjectileGame extends JPanel
{   
    private static JFrame frame = new JFrame("MyGame");
    private static JPanel panelContent = new JPanel();
    MenuPanel menuPanel = new MenuPanel();
    GridPanel gridPanel = new GridPanel();
    Ball ball = new Ball();

    static CardLayout card = new CardLayout(); 

    public ProjectileGame()
    {   
        frame.setTitle("ProjectileGame");
        frame.add(panelContent);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setResizable(false);
        frame.pack();
        frame.setSize(900, 700);

        panelContent.setLayout(card);
        panelContent.add(menuPanel, "1");
        panelContent.add(gridPanel, "2");

        card.show(panelContent, "1");   //First JPanel to be shown is that of the main menu.

        frame.setVisible(true);
    }     

    public static void menuButtonPressed()
    {
        card.show(panelContent, "2");
    }

    public static void gridButtonPressed()
    {
        card.show(panelContent, "1");
    }

    public static void main(String args[])
    {
        new ProjectileGame();
    }
}

gridPanel Class:

public class GridPanel extends JPanel implements ActionListener
{
    private static final Graphics2D g2 = null;
    Ball ball = new Ball();
    JButton backToTheMenu = new JButton("To the Menu");
    Timer timer = new Timer(14, this);

    public GridPanel()
    {
        setOpaque(true);
        setBackground(Color.WHITE);
        setPreferredSize(new Dimension(900, 710));
        add(ball);
        add(backToTheMenu);

        backToTheMenu.addActionListener(new ActionListener()
        {
            public void actionPerformed(ActionEvent arg0)
            {       
                ProjectileGame.gridButtonPressed();
            }
        });
    } 

    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);

        Graphics2D g2d1 = (Graphics2D)g;

        ball.paintComponent(g2d1);

        g.setColor(Color.RED);
        g.fillRect(0,  649,  30,  33);

        g.setColor(Color.BLUE);

        for (int i = 0; i < 35; i++)
        {
            g.setColor(Color.GREEN);
            g.drawLine(0, (20+(30*i)),  900,  (20+(30*i)));
            g.drawLine((30+(30*i)), 0, (30+(30*i)), 1000);
        }

        g.setColor(Color.RED);
        g.drawLine(0, 650, 900, 650);
        g.drawLine(30, 0, 30, 1000);

        g.setColor(Color.BLACK);
        g2d1.drawString("X Displacement (metres)", 400, 667);
        AffineTransform at = new AffineTransform();
        at.setToRotation(Math.PI / -1.97);
        g2d1.setTransform(at);
        g2d1.drawString("Y Displacement (metres)", -380, 8);    

    }                 

    public void actionPerformed(ActionEvent e)
    {
        ball.ballPhysics();
        repaint();
        timer.restart();
    }
}

Answer 1

Don't add transforms and rotations etc. to the Graphics object passed to the paintComponent() method. This Graphics object is passed to all other components when they are painted.

Instead you should be creating a temporary Graphics object to do the painting:

@Override
protected void paintComponent(Graphics g)
{
    super.paintComponent(g);

    Graphics2D g2d = (Graphics2D)g.create();

    //  do custom painting

    g2d.dispose();
}

Now you need to be able to add multiple components to a panel. Note that you can always add another panel to a panel so you can have unlimited nested levels of panels. So you can easily create two "cards" for you CardLayout that each have a different number of components added to them.

The basics is something like:

JButton button1 = new JButton("Back to Card2") 
JPanel gridPanel = new GridPanel();
JPanel card1 = new JPanel(new BorderLayout());
card1.add(button1, BorderLayout.PAGE_START);
card1.add(gridPanel, BorderLayout.CENTER);

JButton button2 = new JButton("Back to Card1");
JPanel card2 = new JPanel();
card2.add(button2);

JPanel cardPanel = new JPanel();
cardPanel.setLayout( new CardLayout(...) );
cardPanel.add(card1, ...);
cardPanel.add(card2, ...);

frame.add(cardPanel);