Button placement and location not working

Question

I recently tried out an online tutorial of Swing and Java GUI's and I decided to replicate the tutorial code but add in a third button. I tried to add in a red one, and I successfully did (it doesn't do anything yet), but i'm having some coordinate issues. Whenever I try to run it, something like this comes up:

All I really need help with is with coordinates or the size of the frames. I really don't know where to go from here. I'm sure this is a relatively simple question but, thanks!

import javax.swing.*;
import java.awt.Color;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class Test1 implements  ActionListener
{

// Definition of global values and items that are part of the GUI.
int blackScoreAmount = 0;
int greenScoreAmount = 0;
int redScoreAmount = 0;

JPanel titlePanel, scorePanel, buttonPanel;
JLabel blackLabel, greenLabel, redLabel, blackScore, greenScore, redScore;
JButton blackButton, greenButton, redButton, resetButton;

public JPanel createContentPane ()
{

    // We create a bottom JPanel to place everything on.
    JPanel totalGUI = new JPanel();
    totalGUI.setLayout(null);

    // Creation of a Panel to contain the title labels
    titlePanel = new JPanel();
    titlePanel.setLayout(null);
    titlePanel.setLocation(10, 0);
    titlePanel.setSize(180, 30);
    totalGUI.add(titlePanel);

    blackLabel = new JLabel("Black Team");
    blackLabel.setLocation(0, 0);
    blackLabel.setSize(120, 30);
    blackLabel.setHorizontalAlignment(0);
    blackLabel.setForeground(Color.black);
    titlePanel.add(blackLabel);

    greenLabel = new JLabel("Green Team");
    greenLabel.setLocation(130, 0);
    greenLabel.setSize(120, 30);
    greenLabel.setHorizontalAlignment(0);
    greenLabel.setForeground(Color.green);
    titlePanel.add(greenLabel);

    redLabel = new JLabel("Red Team");
    redLabel.setLocation(250, 0);
    redLabel.setSize(120, 30);
    redLabel.setHorizontalAlignment(0);
    redLabel.setForeground(Color.red);
    titlePanel.add(redLabel);

    // Creation of a Panel to contain the score labels.
    scorePanel = new JPanel();
    scorePanel.setLayout(null);
    scorePanel.setLocation(10, 40);
    scorePanel.setSize(180, 30);
    totalGUI.add(scorePanel);

    blackScore = new JLabel(""+blackScoreAmount);
    blackScore.setLocation(0, 0);
    blackScore.setSize(120, 30);
    blackScore.setHorizontalAlignment(0);
    scorePanel.add(blackScore);

    greenScore = new JLabel(""+greenScoreAmount);
    greenScore.setLocation(130, 0);
    greenScore.setSize(120, 30);
    greenScore.setHorizontalAlignment(0);
    scorePanel.add(greenScore);

    redScore = new JLabel(""+redScoreAmount);
    redScore.setLocation(250, 0);
    redScore.setSize(120, 30);
    redScore.setHorizontalAlignment(0);
    scorePanel.add(redScore);

    // Creation of a Panel to contain all the JButtons.
    buttonPanel = new JPanel();
    buttonPanel.setLayout(null);
    buttonPanel.setLocation(10, 80);
    buttonPanel.setSize(380, 80);
    totalGUI.add(buttonPanel);

    // We create a button and manipulate it using the syntax we have
    // used before. Now each button has an ActionListener which posts 
    // its action out when the button is pressed.
    blackButton = new JButton("Black Score");
    blackButton.setLocation(0, 0);
    blackButton.setSize(120, 30);
    blackButton.addActionListener(this);
    buttonPanel.add(blackButton);

    greenButton = new JButton("Green Score");
    greenButton.setLocation(130, 0);
    greenButton.setSize(120, 30);
    greenButton.addActionListener(this);
    buttonPanel.add(greenButton);

    redButton = new JButton("Red Score");
    redButton.setLocation(250, 0);
    redButton.setSize(120, 30);
    redButton.addActionListener(this);
    buttonPanel.add(redButton);

    resetButton = new JButton("Reset Score");
    resetButton.setLocation(0, 40);
    resetButton.setSize(250, 30);
    resetButton.addActionListener(this);
    buttonPanel.add(resetButton);

    totalGUI.setOpaque(true);
    return totalGUI;
}

// This is the new ActionPerformed Method.
// It catches any events with an ActionListener attached.
// Using an if statement, we can determine which button was pressed
// and change the appropriate values in our GUI.
public void actionPerformed(ActionEvent e) 
{
    if(e.getSource() == blackButton)
    {
        blackScoreAmount = blackScoreAmount + 1;
        blackScore.setText(""+blackScoreAmount);
    }
    else if(e.getSource() == greenButton)
    {
        greenScoreAmount = greenScoreAmount + 1;
        greenScore.setText(""+greenScoreAmount);
    }
    else if(e.getSource() == resetButton)
    {
        blackScoreAmount = 0;
        greenScoreAmount = 0;
        blackScore.setText(""+blackScoreAmount);
        greenScore.setText(""+greenScoreAmount);
    }
}

private static void createAndShowGUI() 
{

    JFrame.setDefaultLookAndFeelDecorated(true);
    JFrame frame = new JFrame("Black and Green");

    //Create and set up the content pane.
    Test1 demo = new Test1();
    frame.setContentPane(demo.createContentPane());

    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(280, 190);
    frame.setVisible(true);
}

public static void main(String[] args) 
{
    //Schedule a job for the event-dispatching thread:
    //creating and showing this application's GUI.
    SwingUtilities.invokeLater(new Runnable()
    {
        public void run() 
        {
            createAndShowGUI();
        }
    });
  }
}  

Answer 1

Your frame is 280x190:

frame.setSize(280, 190);

and you try to place a red button with an x origin of 250 and a width size of 120 -> 370. Just adjust the window frame size accordingly if you add new elements.

And for that kind of task it may be better (at least simpler) to use layouts.

Answer 2

The size of your window is "hardcoded" :

frame.setSize(280, 190);

and so are the size and positions of your buttons:

redButton.setLocation(250, 0);
redButton.setSize(120, 30);

Your putting a button with a Width of 120 at the position 250 of a frame that is 280 large so only 25% of you button can be visible.

You have to adapt the size of your frame and the position of your buttons to get it to be fully visible and pretty..

EDIT

Now, has suggested by many other repliers, if you want to improve your application, try getting rid of all the hard-coded values and use Layout Managers instead.

Here are some good explanations about them :

• http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
• http://docs.oracle.com/javase/tutorial/uiswing/layout/using.html