Painting nine squares to swing not working?

Question

I am trying to add 9 squares of different colors using java, this is what I am doing:

import java.awt.*;
import javax.swing.*;
import java.util.ArrayList; 

public class GUI{
  private JFrame frame;
  private ArrayList<Blocks> squares;

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

  public GUI(){
    frame = new JFrame("Blocks");
    frame.setLayout(new GridLayout(3,3));

    squares = new ArrayList<Blocks>();
    squares.add(new Blocks(100,200,150,20,10));
    squares.add(new Blocks(120,100,50,100,10));
    squares.add(new Blocks(70,255,0,180,10));
    squares.add(new Blocks(150,150,150,20,70));
    squares.add(new Blocks(100,100,100,100,70));
    squares.add(new Blocks(0,0,0,180,70));
    squares.add(new Blocks(220,200,50,20,130));
    squares.add(new Blocks(110,80,150,100,130));
    squares.add(new Blocks(90,235,195,180,130));

    frame.setBounds(850,300,300,260);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    //frame.getContentPane().setLayout(new GridLayout());
    for(int i = 0; i<squares.size(); i++){
      frame.add(squares.get(i));
    }
    frame.setVisible(true);    
  }
}

class Blocks extends JComponent{  
   private JLabel label;
   private int r;
   private int g;
   private int b;
   private int x;
   private int y;

   public Blocks(int r,int g,int b, int x, int y){
     super();          
     this.r = r;
     this.g = g;
     this.b = b;
     this.x = x;
     this.y = y;
 //label = new JLabel(s);
 //setLayout(new BorderLayout());
 //add(label, BorderLayout.CENTER);
 //setLocation(20,10);
 //setSize(80,60);
   }

   public void paintComponent(Graphics G){
     super.paintComponent(G);
     G.setColor(new Color(r,g,b));
     G.fillRect(x,y,80,60);
   }
}

So only one square is showing, but when I expand the frame, all squares are shown but there is huge gaps between them, I am trying to make them next to each other as you can see by my x and y values, I would like to have all of them next to each other in a 300*260 frame, each square is 80*60.

EDIT All components ARE showing, not only one is showing, but they are showing when I expand the frame only and they are far apart not next to each other as I want them which I thought would work. Not duplicate.

Answer 1

The problem is that you are doing custom painting from (x, y) of the component. You should be doing the painting from (0, 0) of the component.

You are using the layout manager to position the component in a grid, so you just let the layout manager determine the (x, y) location of each component and then you just fill the component. based on its size.

You should also be overriding the getPreferredSize() method of the component so that the layout manager can determine the initial size of the component when pack is used.

I want a gap between the frame and the components, they are filling the entire frame

Use an EmptyBorder on the parent panel. Read the section from the Swing tutorial on How to Use Borders for more information.