Java buttons on top of graphics in a GUI issue

Question

For my end of the year project, I'm trying to make a game which helps a person study different questions, which are shown in a GUI. Ideally, buttons will be available for the user to press and see if their answer was correct. I have made the basis of the GUI with the variables, the ArrayList <String[]> variable which will hold the questions with their answers, and tried to make buttons.

However, when I try to run the program, the buttons (I only have one in the code shown) are cut off and I am unable to place them where they properly belong. Please help!

Somebody please show me a solution that actually has been tested and works! I can't seem to get it based off what has been posted for me so far!

Here's what it looks like when I run it:

And here's all of the program's code:

import java.awt.*;
import javax.swing.*;
import java.awt.geom.Line2D;
import java.util.*;
import java.awt.event.*;

public class EuroGUI extends JPanel {
    //Instantiate necessary variables.
    ArrayList <String[]> questions = new ArrayList <String[]>();  //Stores (Question + Answers, Correct Answer)

    int width = 1280;   //GUI Size
    int height = 720;   // ^
    int correct = 0;    //Number of correct answers
    int attempted = 0;  //Number of questions attempted
    int streak = 0;     //Number of correct answers in a row
    int points = 0;     //Points accumulated
    Font title = new Font("Serif", Font.PLAIN, 60);
    Font statsTitle = new Font("Serif", Font.PLAIN, 45);
    Font sig = new Font("Mistral", Font.PLAIN, 45);

    //Drop down options stuff
    JMenu ddMenu = new JMenu("Select an option");
    String[] dropDown = new String[] {"A", "B", "C", "D", "E"};

    String completion = "starting"; //Determines if the first time repainting

    Scanner keyboard = new Scanner(System.in);  //Make a keyboard object to test stuff

    public static void main(String[]args){  //Main Runner
        EuroGUI g = new EuroGUI();
        g.setUpScreen();
        g.repaint();
    }

    public void setUpScreen() {  //Create the physical GUI, which paints all graphics
                                 //Used http://www.mathcs.emory.edu/~cheung/Courses/377/Syllabus/8-JDBC/GUI/Progs/Layout1.java for buttons

        //Create actual GUI window and graphics.
        //Create actual GUI window and graphics.
    JFrame f = new JFrame("AP European History Study Tool");

    JPanel panelGrid = new JPanel();
    panelGrid.setLayout(new GridLayout());
    setLayout(null);

    JPanel panelBorder = new JPanel();
    panelBorder.setLayout(new BorderLayout());
    JButton xA = new JButton("Choice A");
    panelGrid.add(xA, "West");

    panelBorder.setLocation(500,500);
    f.getContentPane().add(panelBorder);
    f.setResizable(false);
    f.setVisible(true);
    f.setSize(width, height);
    f.setBackground(Color.lightGray);
    f.add(this);

    }
    public void paintComponent(Graphics g) {  //Draws information on the GUI  (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
        Graphics2D g2 = (Graphics2D) (g);

        //Draw a background box which will cover anything that was not re-painted over.
        g.setColor(Color.lightGray);
        g.fillRect (0, 1280, 0, 720);

        //Title "interface"
            //Change color back for the lines;
            g.setColor(Color.blue);
            //Enable bolder lines.
            g2.setStroke(new BasicStroke(6));

            //Create a box of lines around the title.
            g2.draw(new Line2D.Double(200, 0, 200, 120));
            g2.draw(new Line2D.Double(200, 120, 1070, 120));
            g2.draw(new Line2D.Double(1070, 0, 1070, 120));
            g2.draw(new Line2D.Double(200, 0, 1070, 0));

            //Fill in box with title with some colors :)
            g.setColor(Color.green);
            g.fillRect (200, 0, 870, 120);

            //Write title
            g2.setFont(title);
            g.setColor(Color.cyan);
            g.drawString("AP European History Study Tool", 240, 80);
            g.setColor(Color.black);
            g.drawString("AP European History Study Tool", 238, 78);

        //Signiature on Title
            g.setColor(Color.white);
            g2.setFont(sig);
            g.drawString("by My Name", 600, 120);
            g.setColor(Color.blue);
            g.drawString("by My Name", 598, 118);

        //Statistics Bar Outline
            g.setColor(Color.blue);
            g2.draw(new Line2D.Double(1000, 170, 1000, 670));
            g2.draw(new Line2D.Double(1000, 170, 1280, 170));
            g2.draw(new Line2D.Double(1280, 170, 1280, 670));
            g2.draw(new Line2D.Double(1000, 670, 1280, 670));
            g2.setStroke(new BasicStroke(6));
            g.setColor(Color.black);
            g.fillRect (1000, 170, 1280, 500);
            g.setColor(Color.green); //Underline
            g2.setStroke(new BasicStroke(2));
            g2.draw(new Line2D.Double(1055, 230, 1215, 230));
            g2.setStroke(new BasicStroke(6));

        //Overall Score
            g2.setFont(statsTitle);
            g2.setColor(Color.green);
            g.drawString("Statistics", 1055, 220);
            g2.setColor(Color.cyan);
            g.drawString(correct + "/" + attempted + " Correct", 1035, 285); 

        //Streak
            if (streak >= 3)
            {
                g2.setColor(Color.red);
                g.drawString(streak + " Streak", 1060, 340);
            }
            else{
                g2.setColor(Color.cyan);
                g.drawString(streak + " Streak", 1060, 340);
            }


        if (completion.equals("starting")){

        }
    }
}

Answer 1

This is a symptom of breaking the paint chain.

Graphics is a shared resources, that is, the same Graphics context is used to paint all the components within a paint cycle.

One of the jobs of paintComponent is to prepare the Graphics context for painting by clearing it before anything is painted to it.

So instead of...

public void paintComponent(Graphics g) {  //Draws information on the GUI  (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
    Graphics2D g2 = (Graphics2D) (g);

Try using

public void paintComponent(Graphics g) {  //Draws information on the GUI  (Found information on graphics 2D at http://www.tutorialspoint.com/javaexamples/gui_line.htm)
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D) (g);

Pixel perfect layouts are an illusion in modern UIs. You don't control factors like font metrics, dpi or rendering pipelines which all effect the amount of space individual components might need. Instead you should make use of appropriate layout managers and consider using compound layouts to produce more complex solutions

Updated with example

There are a number of things wrong, the main problem is, panelGrid isn't been added to anything. The null layout manager is also not helping.

You're also focusing all your efforts into a single panel, which is going to make life messy.

Instead, try separating each section into its own component and focus on there individual needs, you'll find it much easier to manage in the long run.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.CompoundBorder;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;
import javax.swing.border.MatteBorder;

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

    public Example() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new HeaderPane(), BorderLayout.NORTH);
                frame.add(new StatisticsPane(), BorderLayout.EAST);
                frame.add(new QuestionPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class HeaderPane extends JPanel {

        public HeaderPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 1;
            gbc.gridy = 0;
            gbc.anchor = GridBagConstraints.SOUTH;
//            gbc.ipadx = 100;
            NamePane namePane = new NamePane();
            FontMetrics fm = namePane.getFontMetrics(namePane.getFont());
            add(namePane, gbc);

            gbc.insets = new Insets(0, 0, fm.getDescent(), 0);

            gbc.gridx = 0;
            gbc.gridwidth = 2;
            gbc.ipadx = 10;
            gbc.ipady = 10;
            gbc.anchor = GridBagConstraints.CENTER;
            add(new TitlePane(), gbc);
        }

        public class ShadowLabel extends JPanel {

            private String text;
            private Color shadowColor;
            private int shadowOffset;

            public ShadowLabel(String text, Color shadowColor) {
                this.text = text;
                this.shadowColor = shadowColor;
                this.shadowOffset = 2;
            }



            public int getShadowOffset() {
                return shadowOffset;
            }

            public void setShadowOffset(int shadowOffset) {
                this.shadowOffset = shadowOffset;
            }

            @Override
            public Dimension getPreferredSize() {
                FontMetrics fm = getFontMetrics(getFont());
                return new Dimension(fm.stringWidth(getText()), fm.getHeight());
            }

            public String getText() {
                return text;
            }

            public Color getShadowColor() {
                return shadowColor;
            }

            public void setText(String text) {
                this.text = text;
                repaint();
            }

            public void setShadowColor(Color shadowColor) {
                this.shadowColor = shadowColor;
                repaint();
            }

            @Override
            protected void paintComponent(Graphics g) {
                super.paintComponent(g);
                g.setFont(getFont());
                FontMetrics fm = g.getFontMetrics();
                int x = (getWidth() - fm.stringWidth(getText())) / 2;
                int y = (getHeight() - fm.getHeight()) / 2;
                g.setColor(getShadowColor());
                g.drawString(getText(), x + getShadowOffset(), y + getShadowOffset() + fm.getAscent());
                g.setColor(getForeground());
                g.drawString(getText(), x, y + fm.getAscent());
            }


        }

        public class TitlePane extends ShadowLabel {

            public TitlePane() {
                super("AP European History Study Tool", Color.CYAN);
                setBackground(Color.GREEN);
                setBorder(new MatteBorder(0, 1, 1, 1, Color.BLUE));
                setFont(new Font("Serif", Font.PLAIN, 60));
            }

        }

        public class NamePane extends ShadowLabel {

            public NamePane() {
                super("by Me", Color.WHITE);
                setForeground(Color.BLUE);
                setFont(new Font("Mistral", Font.PLAIN, 45));
                setOpaque(false);
            }

        }

    }

    public class StatisticsPane extends JPanel {

        private JLabel score;
        private JLabel streak;

        public StatisticsPane() {
            setLayout(new BorderLayout());
            setBackground(Color.BLACK);
            setBorder(new CompoundBorder(new LineBorder(Color.BLUE), new EmptyBorder(4, 4, 4, 4)));

            JLabel statistics = new JLabel("Statistics");
            statistics.setFont(new Font("Serif", Font.PLAIN, 45));
            statistics.setForeground(Color.GREEN);
            statistics.setBorder(new CompoundBorder(new MatteBorder(0, 0, 1, 0, Color.GREEN), new EmptyBorder(4, 4, 4, 4)));
            add(statistics, BorderLayout.NORTH);

            score = new JLabel("0/0 correct");
            score.setForeground(Color.GREEN);
            score.setFont(new Font("Serif", Font.PLAIN, 45));
            streak = new JLabel("0 streak");
            streak.setForeground(Color.GREEN);
            streak.setFont(new Font("Serif", Font.PLAIN, 45));

            JPanel pnl = new JPanel(new GridBagLayout());
            pnl.setOpaque(false);
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            pnl.add(score, gbc);
            gbc.gridy++;
            gbc.weighty = 1;
            gbc.anchor = GridBagConstraints.NORTH;
            pnl.add(streak, gbc);

            add(pnl);

        }

    }

    public class QuestionPane extends JPanel {

        public QuestionPane() {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.anchor = GridBagConstraints.WEST;
            JButton xA = new JButton("Choice A");
            add(xA, gbc);
        }

    }
}

I would also separate the management of the data and the UI, so that the data is managed by some kind of model or models which can respond to changes in the UI and visa-versa. This means that your UI becomes a visual representation of your data model and allows the two to decouple and work independently from each other...

Take a look Model–view–controller for more details. Note: Swing uses a version of this, but it's more like Model-View and Controller

You should also take a look at Creating a GUI With JFC/Swing to see how you make better use of the ready made components available in Swing

Answer 2

You did not set up your Layout properly. Might not be exactly what you are looking for but if you change from a FlowLayout to a BorderLayout it seems to fix your issue. Also you don't use panel2 anywhere in you code so you can remove it.

public void setUpScreen() {  //Create the physical GUI, which paints all graphics
                             //Used http://www.mathcs.emory.edu/~cheung/Courses/377/Syllabus/8-JDBC/GUI/Progs/Layout1.java for buttons

    //Create actual GUI window and graphics.
    JFrame f = new JFrame("AP European History Study Tool");

    JPanel panelGrid = new JPanel();
    panelGrid.setLayout(new GridLayout());
    setLayout(null);

    JPanel panelBorder = new JPanel();
    panelBorder.setLayout(new BorderLayout());
    JButton xA = new JButton("Choice A");
    panelGrid.add(xA, "West");

    panelBorder.setLocation(500,500);
    f.getContentPane().add(panelBorder);
    f.setResizable(false);
    f.setVisible(true);
    f.setSize(width, height);
    f.setBackground(Color.lightGray);
    f.add(this);


}