Creating an animated 4x4 grid in Java

Question

I need to create a 4 x 4 grid of rectangles in Java, I then need these rectangles to change color in a sequence.

I've never done any graphical work before, just things in the console.

I started by doing some research and created a 650 x 650 JFrame to put the rectangles in. After that I used GridLayout and managed to create a 4 x 4 grid out of buttons using window.JButton which wasn't right.

How would I create rectangles instead? And would it be right to use for loops with ++ to time the animation?

I couldn't find anything that worked for my needs when searching on stackoverflow and google. Sorry if this is a stupid question. I'm new to this and I'm doing for an apprecticeship.

Here's how I would like it to look like, with each rectangle changing color in a time interval

Answer 1

From @Eng.Fouad answer (so give him credit and upvote his answer too), I made some changes, this example shows how to use a Swing Timer which changes color every second from green to red. I'm using a simple JLabel for demonstration purposes, take this logic into the GridLayout you have:

Here are some screen shots on how it looks:

import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.Color;

import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.Timer;

public class SimpleTimer extends JFrame
{
    private JLabel label;
    private Timer timer;
    private int counter = 3; // the duration
    private int delay = 1000; // every 1 second
    private static final long serialVersionUID = 1L;
    private Color c = Color.RED;
    private boolean red = true;
    private boolean stop = false;
    int i = counter;

    public SimpleTimer()
    {
        super("Simple Timer");
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        label = new JLabel("Wait for " + counter + " sec", JLabel.CENTER);
        JPanel contentPane = (JPanel) getContentPane();
        contentPane.add(label, BorderLayout.CENTER);
        contentPane.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
        pack();

        timer = new Timer(delay, action);
        timer.setInitialDelay(0);
        timer.start();
        setVisible(true);
    }

    ActionListener action = new ActionListener()
    {   
        @Override
        public void actionPerformed(ActionEvent event)
        {
            if(i == 0)
            {
                timer.stop();
                stop = true;
                i = counter;
                timer = new Timer(delay, action);
                timer.setInitialDelay(0);
                timer.start();
            }
            else
            {
                c = red ? Color.GREEN : Color.RED;
                red = !red;
                label.setBackground(c);
                label.setOpaque(true);
                label.setText("Wait for " + i + " sec");
                i--;
            }
        }
    };

    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run()
            {
                new SimpleTimer();
            }
        });
    }
}

Answer 2

You could use jLabel, and set background color to it. How you do it, you can read here: How do I set a JLabel's background color?

Then just use for loop and Thred.sleep to change there color in animation.