How to make components in a JPanel stretch as far as possible?

Question

I'm trying to create a simple swing program that lets the user play with a circle.

Here is my code:

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.border.Border;
import javax.swing.BorderFactory;

import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.FlowLayout;
import java.awt.BorderLayout;

public class SixthProgram
{
    public static void main(String[] args)
    {
        GUI prog=new GUI("SixthProgram");
        prog.setBounds(350,250,500,250);
        prog.setVisible(true);
    }
}

class GUI extends JFrame implements MouseListener, MouseMotionListener
{
    JPanel colorPan, color1, color2, color3 ,color4 ,color5;

    int x=3,y=30; // Position of circle

    public GUI(String header)
    {
        super(header);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLayout(new BorderLayout());

        maker();

        addMouseListener(this);
        addMouseMotionListener(this);

        add(colorPan, BorderLayout.SOUTH);
    }

    public void maker()
    {
        colorPan = new JPanel();

        Border raisedbevel = BorderFactory.createRaisedBevelBorder();
        Border loweredbevel = BorderFactory.createLoweredBevelBorder();
        Border compound = BorderFactory.createCompoundBorder(raisedbevel, loweredbevel);
        colorPan.setBorder(compound);

        colorPan.setLayout(new FlowLayout(FlowLayout.CENTER));

        color1 = new JPanel();
        color2 = new JPanel();
        color3 = new JPanel();
        color4 = new JPanel();
        color5 = new JPanel();

        color1.setBackground(Color.WHITE);
        color2.setBackground(Color.GREEN);
        color3.setBackground(Color.RED);
        color4.setBackground(Color.BLUE);
        color5.setBackground(Color.BLACK);

        colorPan.add(color1);
        colorPan.add(color2);
        colorPan.add(color3);
        colorPan.add(color4);
        colorPan.add(color5);

    }

    @Override
    public void paint(Graphics g)
    {
        //g.setColor(Color.WHITE);
        //g.fillRect(0,0,getWidth(),getHeight());
        super.paint(g); //Do the same thing as above(Clear jframe)

        g.setColor(Color.RED);
        g.fillOval(x,y,50,50);
    }

    public void mouseExited(MouseEvent e) //MouseListener overrided methods
    {
        System.out.println("Exit");
    }

    public void mouseEntered(MouseEvent e)
    {
        System.out.println("Enter");
    }

    public void mouseReleased(MouseEvent e)
    {
        System.out.println("Release");
    }

    public void mousePressed(MouseEvent e)
    {
        System.out.println("Press");    
        x=e.getX();
        y=e.getY();
        if(x+50<getWidth() && y+50<getHeight()) // Preventing out of bounds
            repaint();
    }

    public void mouseClicked(MouseEvent e) //Press+Release=Click
    {
        System.out.println("Click");
        System.err.println(((JPanel)e.getSource()).getName());
    }

    public void mouseDragged(MouseEvent e) //MouseMotionListener overrided methods
    {
        System.out.println("Dragged to ("+ e.getX() +","+ e.getY() +")");
        x=e.getX();
        y=e.getY();
        if((x>=3 && y>=30) && (x+50<getWidth() && y+50<getHeight())) // Preventing out of bounds
            repaint();
    }

    public void mouseMoved(MouseEvent e)
    {
        System.out.println("Moved to ("+ e.getX() +","+ e.getY() +")");
    }

}

I'm trying to create a JPanel with different colors. When clicked on a color, the circle's color will change. I've not yet implemented this part.

My problem is, when I run the above program, I get the output as:

But I want the output to be

I've tried removing

colorPan.setLayout(new FlowLayout(FlowLayout.CENTER));

and this resulted in the same output.

How do I stretch the components in colorPan, so that I get the expected output?

Answer 1

Instead of a FlowLayout, you can use a GridLayout as follows:

colorPan.setLayout(new GridLayout(1, 5));

This divides the width of the element in 1 row and 5 columns, one per color.

Answer 2

Change the following:

colorPan.setLayout(new FlowLayout(FlowLayout.CENTER));

To a layout that will stretch the content to fit, like GridLayout: E.G.

colorPan.setLayout(new GridLayout(1,0));