I'm trying to make a simple game where you can set out tiles that make up a celtic design and I can't seem to make the buttons stay the same size. Here's the code:
public class CTGContent {
public static JPanel content = new JPanel();
private static JButton board[][] = new JButton[20][20];
static private Random random = new Random();
public static int CTGcolumn = random.nextInt(14)+1;
public static int CTGRow = 15;
private static GridLayout boardLayout;
public final int getBoardWidth(){
return CTGcolumn*40;
}
public final int getBoardHeight(){
return CTGRow*40;
}
public static void initializeBoard(){
int row = 0;
int column = 0;
int defaultCOL = 0;
int defaultROW = 0;
boardLayout = new GridLayout(CTGRow, CTGcolumn);
content.setLayout(boardLayout);
Random determine = new Random();
while (row < CTGRow){
column = 0;
while (column < CTGcolumn){
board[row][column] = new JButton(new ImageIcon("images\\template.gif"));
board[row][column].setPreferredSize(new Dimension(40, 40));
board[row][column].setMaximumSize(new Dimension(40, 40));
board[row][column].setMinimumSize(new Dimension(40, 40));
content.add(board[row][column]);
column++;
}
row++;
}
}
private static void build(){
initializeBoard();
JFrame window = new JFrame("testing the menubar");
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setContentPane(content);
content.add(new JLabel("My Label"));
window.pack();
window.setVisible(true);
}
public CTGContent() {
}
public CTGContent(JFrame window){
initializeBoard();
window.add(content);
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater( new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
build();
}
});
}
}
It starts off the right size usually but then for some reason if I resize the window or something they change size with it. I need them to stay the same size no matter what. How can I do that?
Change:
window.setContentPane(content);
To:
JPanel contentCenter = new JPanel(new GridBagLayout());
contentCenter.add(content);
window.setContentPane(contentCenter);
There are other ways to do it, like make the layout a FlowLayout, but the GBL will keep it nicely centered - both vertically and horizontally.
Tips
Please learn common Java naming conventions (specifically the case used for the names) for class, method & attribute names & use them consistently.
For better help sooner, post an MCVE. That code only needed import in order to make it an MCVE.
See also this answer to Centering a JLabel on a JPanel
You use GridLayout because of your buttons resize horisontally/vertically always to fill whole grid cell. To prevent that you can use another LayoutManager, for example GridBagLayout.
Always read about setting size to components.
Related
I'm working on making a battleship game board using swing in java. I've added the panel (i.e. the grid or the game board) to the window but it still won't show up. I've pasted the code below. Any help is appreciated. Thanks.
public class board {
private static JFrame window;
private static JPanel[][] grid;
public static void main(String[] args) {
window = new JFrame();
window.setTitle("GAME BOARD");
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
grid = new JPanel[10][10];
for (int i =0; i< 10; i++) {
for (int j =0; j< 10; j++) {
grid[i][j] = new JPanel();
grid[i][j].setBackground(Color.white);
grid[i][j].setBorder(BorderFactory.createLineBorder(Color.black));
grid[i][j].setPreferredSize(new Dimension(25,25));
window.add(grid[i][j]);
}
}
window.pack();
window.setVisible(true);
}
}
By default calling JFrame#add() will add to the JFrames contentPane which has a default layout of BorderLayout.
Have a read on A Visual Guide to Layout Managers. You probably want to either use a GridLayout or FlowLayout depending on your needs.
I'd also suggest overriding getPreferredSize and returning the dimensions as opposed to calling setPreferredSize.
You then would do something like this:
// this jpanel will hold the all grid jpanels could also use new FlowLayout()
JPanel container = new JPanel(new GridLayout(10,10));
grid = new JPanel[10][10];
for (int i =0; i< 10; i++) {
for (int j =0; j< 10; j++) {
grid[i][j] = new JPanel() {
#Override
public Dimension getPreferredSize() {
return new Dimension(25, 25);
}
};
...
container.add(grid[i][j]);
}
}
window.add(container);
window.pack();
window.setVisible(true);
Have a look at this question which is also about creating a layout for a battleship game. I'd suggest using something more lightweight and easier to customize like JLabel to represent each square.
You may also want to read up on The Event Dispatch Thread
Essentially all Swing components should be created on the EDT via SwingUtilities.invokeLater(...):
import javax.swing.SwingUtilities;
public class TestApp {
public TestApp() {
createAndShowGui();
}
public static void main(String[] args) {
SwingUtilities.invokeLater(TestApp::new);
}
private void createAndShowGui() {
// create JFrame and other Swing components here
}
}
You need to set your frame size
window.setPreferredSize(new Dimension(800, 800));
This is a follow-up to this question. Any viable answer will also answer that one.
What layout may be used with as little modification as possible to replicate the aligning nature of a FlowLayout, but never linebreak and also be available in a from-top-to-bottom flavour?
The obvious candidate, BoxLayout, does not work nicely with JPanels. Consider the following two examples:
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
class App
{
public static void main(String[] args)
{
JFrame window = new JFrame();
Box box = new Box(BoxLayout.Y_AXIS);
for(int i = 0; i < 5; ++i)
{
JLabel label = new JLabel("XX");
box.add(label);
}
box.add(Box.createVerticalGlue());
window.add(box);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
This will properly display a vertical line of labels, beginning at the top and stretching as far towards the bottom as the labels take space. Good.
Modifying this, however, just a tiny bit:
public static void main(String[] args)
{
JFrame window = new JFrame();
Box box = new Box(BoxLayout.Y_AXIS);
for(int i = 0; i < 5; ++i)
{
JLabel label = new JLabel("XX");
JPanel panel = new JPanel();
panel.add(label);
box.add(panel);
}
box.add(Box.createVerticalGlue());
window.add(box);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
This will stretch all components of the Box to the same height, placing the labels far away from each other. Bad.
Overriding the JPanel's getPreferredSize and getMaximumSize methods (with getMinimumSize) has no effect and would be a bad way to fix it, because it relied on the components rather than the container and its layout.
Addendum:
Here is an already pretty successful attempt using GroupLayout. Unfortunately it did not seem to occur to the designer that among DEFAULT_SIZE and PREFERRED_SIZE a choice MINIMUM_SIZE would have been a good idea.
Furthermore if it is possible to invert the sequence of GroupLayout.SequentialGroup, the API is no help to figure out how. I for one certainly have no clue how to even extend that class.
import java.awt.Component;
import java.awt.ComponentOrientation;
import java.awt.Container;
import javax.swing.GroupLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
class LineLayout extends GroupLayout
{
public LineLayout(Container owner, int axis)
{
super(owner);
this.direction = axis;
this.direction |= owner.getComponentOrientation() != ComponentOrientation.LEFT_TO_RIGHT
? LineLayout.RIGHT_TO_LEFT : LineLayout.LEFT_TO_RIGHT;
this.setupGroups();
}
public LineLayout(Container owner, int axis, int orientation)
{
super(owner);
this.direction = axis;
this.direction |= orientation;
this.setupGroups();
}
#Override // to replicate FlowLayout functionality : this method is called from owner.add
public void addLayoutComponent(Component component, Object constraints)
{
if(constraints == null)
{
// REALLY surprised that this works, considering that overriding the JPanel's
// getMaximumSize method with getPreferredSize had no effect
this.horizontal.addComponent(component, GroupLayout.DEFAULT_SIZE,
GroupLayout.DEFAULT_SIZE,
GroupLayout.PREFERRED_SIZE);
this.vertical.addComponent (component, GroupLayout.DEFAULT_SIZE,
GroupLayout.DEFAULT_SIZE,
GroupLayout.PREFERRED_SIZE);
}
// TODO: else
}
protected void setupGroups()
{
super.setAutoCreateGaps(false); // does nothing
if((this.direction & LineLayout.AXIS) == LineLayout.Y_AXIS)
{
this.horizontal = super.createParallelGroup();
this.vertical = (this.direction & LineLayout.ORIENTATION) == LineLayout.RIGHT_TO_LEFT
? this.createSequentialInvertedGroup() : super.createSequentialGroup();
}
else
{
this.horizontal = (this.direction & LineLayout.ORIENTATION) == LineLayout.RIGHT_TO_LEFT
? this.createSequentialInvertedGroup() : super.createSequentialGroup();
this.vertical = super.createParallelGroup();
}
super.setHorizontalGroup(this.horizontal);
super.setVerticalGroup (this.vertical);
}
// How!?
// protected LineLayout.SequentialInvertedGroup createSequentialInvertedGroup() { return new LineLayout.SequentialInvertedGroup(); }
protected GroupLayout.SequentialGroup createSequentialInvertedGroup() { return super.createSequentialGroup(); } // placeholder
protected int direction;
protected GroupLayout.Group horizontal;
protected GroupLayout.Group vertical;
// not sure how reliable the constant field values of BoxLayout are, whether it's smart to assume them unchanging over the ages
public static final int AXIS = 0b1;
public static final int X_AXIS = 0b0; // = BoxLayout.X_AXIS;
public static final int Y_AXIS = 0b1; // = BoxLayout.Y_AXIS;
public static final int ORIENTATION = 0b10;
public static final int LEFT_TO_RIGHT = 0b00; // also top to bottom
public static final int RIGHT_TO_LEFT = 0b10; // also bottom to top
// No idea how; only has "add" methods; cannot actually do anything with the added components!?
//protected static class SequentialInvertedGroup extends GroupLayout.SequentialGroup
//{}
}
class Applikation
{
public static void main(String[] args)
{
JFrame window = new JFrame();
JPanel box = new JPanel();
box.setLayout(new LineLayout(box, LineLayout.Y_AXIS));
for(int i = 0; i < 5; ++i)
{
JLabel label = new JLabel("XX");
JPanel panel = new JPanel();
panel.add(label);
box.add(panel);
}
window.add(box);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
If you try this out, you will note that there are still notable border spaces between the "XX" labels, taking up about 2/3 of an extra label per gap. While already much better than in the BoxLayout example, I do not think there is a good way to improve this spacing further.
private static int MAX_HEIGHT = 40;
private static final Dimension DIMENSION = new Dimension(Integer.MAX_VALUE, MAX_HEIGHT);
public static void main(String[] args)
{
JFrame window = new JFrame();
Box box = new Box(BoxLayout.Y_AXIS){
private static final long serialVersionUID = 1L;
#Override
public Component add(Component comp) {
comp.setMaximumSize(DIMENSION);
return super.add(comp);
}
};
for(int i = 0; i < 5; ++i)
{
JLabel label = new JLabel("XX");
JPanel panel = new JPanel();
panel.add(label);
box.add(panel);
}
window.add(box);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.pack();
window.setVisible(true);
}
You are using a Box for adding your components into. And the Documentation says:
a Box can use only a BoxLayout.
Now lets look into the Documentation for BoxLayout. It says:
BoxLayout pays attention to a component's requested minimum, preferred, and maximum sizes.
Now we have found the reason for the different outputs of your two examples. In your first example you are adding JLabels directly to your Box. Since they have a default maximumSize depending on their content they are not scaled by the Box.
In your second example you are adding JPanels to the Box that have your JLabels in it. A JPanel does not have a default maximumSize and so it is scaled by the Box.
So if you want to get the same output with JPanels as without you need your JPanels to have a maximumSize depending on their content means the JLabels.
So you could set a maximumSize manually. Something like that:
panel.setMaximumSize(new Dimension(100,20));
Or you use a different LayoutManager with your JPanels. One that calculates its size depending on its components. One that pays attention to a component's requested minimum, preferred, and maximum sizes.
Does this sound familiar to you? Right its from the Documentation of BoxLayout. So try to use a BoxLayout on your JPanels and you will get exactly the same result as your first example.
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
Current code
ThreeColorButton class:
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class ThreeColorButton {
private static CompositeIcon icons = new CompositeIcon();
private static JPanel panel = new JPanel();
private static JFrame frame = new JFrame();
private static JLabel label = new JLabel();
public static void main(String[] args) {
//create rgb buttons
JButton redButton = new JButton("Red");
JButton greenButton = new JButton("Green");
JButton blueButton = new JButton("Blue");
//add rgb buttons to panel
panel.add(redButton);
panel.add(greenButton);
panel.add(blueButton);
//add action listeners to buttons
redButton.addActionListener(buttonListener(40, Color.red));
greenButton.addActionListener(buttonListener(40, Color.green));
blueButton.addActionListener(buttonListener(40, Color.blue));
frame.setLayout(new BorderLayout());
frame.add(panel, BorderLayout.NORTH);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
private static ActionListener buttonListener(final int size,final Color color) {
return new ActionListener() {
public void actionPerformed(ActionEvent event) {
SquareIcon icon = new SquareIcon(size, color);
icons.addIcon(icon);
label.setIcon(icons);
frame.add(label, BorderLayout.SOUTH);
frame.repaint();
frame.pack();
}
};
}
}
CompositeIcon code
import javax.swing.*;
import java.awt.*;
import java.util.*;
public class CompositeIcon implements Icon{
private ArrayList<Icon> icons;
private int size;
public CompositeIcon() {
icons = new ArrayList<Icon>();
}
public void paintIcon(Component c, Graphics g, int x, int y) {
int position = x;
for(Icon z : icons) {
z.paintIcon(c,g,position,y);
position = position + z.getIconWidth();
}
}
public int getIconHeight() {
return size;
}
public int getIconWidth() {
int total = 0;
for(Icon z : icons) {
total = total + z.getIconWidth();
}
return total;
}
public void addIcon(Icon z) {
icons.add(z);
}
}
SquareIcon class is only a simple little class that creates a square of a single color with a given size.
My question is, in my ThreeColorButton class, when I run it, it doesn't show any icons when I press either of the RGB buttons. However, in the buttonListener method, if I set label.setIcons(icons) to label.setIcons(icon), it shows a single square and it doesnt place it side by side.
I can't seem to figure out whats causing this behavior. Is there a problem with displaying an array of icons using JLabel?
There is nothing to paint in the label since the height of your Icon is 0, since you never set the size.
I would suggest code something like:
#Override
public int getIconHeight()
{
int size = 0;
for(Icon z : icons)
{
size = Math.max(size, z.getIconHeight());
}
return size;
}
You may want to check out Compound Icon. Similar to your class but it has more features. It supports horizontal/vertical/stacked icon and icon alignment options.
It doesn't support dynamically adding Icons so you would need to change that. I might looking adding that feature myself (when I get time) :)
I can't seem to figure out whats causing this behavior. Is there a problem with displaying an array of icons using JLabel?
Yes, as #mKorbel mentioned, there is a problem. A JLabel can only display a single icon. If you want to display n icons, you will need n JLabel instances.
I'm having a problem with GridLayout and the entire JPanel not being filled. I have a N * M Grid, and I'm filling it with N * M Tiles (They extend JPanel). After adding all these tiles there is still space on the bottom and the right side of the JPanel. I thought GridLayout was supposed to fill up the entire JPanel, and make everything in it evenly sized?
Edit: I didn't want to post all the code since there are multiple classes. Thought maybe there was a simple solution.
public class MainFrame extends JFrame {
private static final long serialVersionUID = 3985493842977428355L;
private final int FRAME_HEIGHT = 800;
private final int FRAME_WIDTH = 700;
private MainPanel mainPanel;
public MainFrame() {
super("Test");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(FRAME_HEIGHT, FRAME_WIDTH);
setLocationRelativeTo(null);
mainPanel = new MainPanel();
getContentPane().add(mainPanel);
setVisible(true);
}
}
public class MainPanel extends JPanel {
/**
*
*/
private static final long serialVersionUID = 3421071253693531472L;
private RoutePanel routePanel;
private ControlPanel controlPanel;
private GridBagConstraints gridBagConstraints;
private GridBagLayout gridBagLayout;
public MainPanel() {
routePanel = new RoutePanel();
controlPanel = new ControlPanel();
setBackground(Color.black);
gridBagLayout = new GridBagLayout();
setLayout(gridBagLayout);
gridBagConstraints = new GridBagConstraints();
createLayout();
}
private void createLayout() {
gridBagConstraints.weightx = 1;
gridBagConstraints.weighty = 1;
gridBagConstraints.gridx = 0;
gridBagConstraints.gridy = 0;
gridBagConstraints.anchor = GridBagConstraints.NORTH;
gridBagConstraints.fill = GridBagConstraints.BOTH;
gridBagLayout.setConstraints(routePanel, gridBagConstraints);
add(routePanel);
gridBagConstraints.weightx = 1;
gridBagConstraints.weighty = .05;
gridBagConstraints.gridx = 0;
gridBagConstraints.gridy = 1;
gridBagConstraints.anchor = GridBagConstraints.SOUTH;
gridBagConstraints.fill = GridBagConstraints.BOTH;
gridBagLayout.setConstraints(controlPanel, gridBagConstraints);
add(controlPanel);
}
}
public class RoutePanel extends JPanel{
/**
*
*/
private static final long serialVersionUID = 4366703088208967594L;
private final int GRID_ROWS = 30;
private final int GRID_COLS = 47;
public RoutePanel() {
setLayout(new GridLayout(GRID_ROWS, GRID_COLS, 0, 0));
for(int i = 0; i < GRID_ROWS * GRID_COLS; i++) {
add(new Tile());
}
setBackground(Color.orange);
}
}
public ControlPanel() {
}
public Tile() {
setBackground(Color.gray);
Border blackline;
blackline = BorderFactory.createLineBorder(Color.black);
setBorder(blackline);
}
Since you're not posting code, we are forced to guess (and this is not good).
My guess: you may be setting the size or the preferred sizes of some of your components or the GUI, and this is causing gaps at the edges of your GUI.
Solution: don't do this. Let the components size themselves via their preferred sizes and the layout managers when pack() is called on the GUI.
For more helpful help, create and post your sscce. For a question like this, code is really mandatory, and I'm a bit surprised actually that you didn't post yours.
Edit 1
For example, note the difference in the GUI's produced:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridLayout;
import javax.swing.*;
public class GapExample {
private static final int M = 5;
private static final int N = 6;
private static final int PREF_W = 700;
private static final int PREF_H = 500;
#SuppressWarnings("serial")
private static void createAndShowGui() {
// *** attempt 1: set preferredSize of the mainPanel JPanel ***
JPanel mainPanel = new JPanel(new GridLayout(M, N));
mainPanel.setBorder(BorderFactory.createLineBorder(Color.red));
mainPanel.setPreferredSize(new Dimension(PREF_W, PREF_H));
for (int i = 0; i < M; i++) {
for (int j = 0; j < N; j++) {
String text = String.format("Foo [%d, %d]", i, j);
JLabel label = new JLabel(text, SwingConstants.CENTER);
label.setBorder(BorderFactory.createLineBorder(Color.blue));
mainPanel.add(label);
}
}
JOptionPane.showMessageDialog(null, mainPanel,
"Attempt 1, setPreferredSize of mainPane",
JOptionPane.PLAIN_MESSAGE);
// *** attempt 2: override the getPreferredSize of the JLabel cells in the
// grid ***
mainPanel = new JPanel(new GridLayout(M, N));
mainPanel.setBorder(BorderFactory.createLineBorder(Color.red));
final Dimension labelPrefSize = new Dimension(PREF_W / N, PREF_H / M);
for (int i = 0; i < M; i++) {
for (int j = 0; j < N; j++) {
String text = String.format("Foo [%d, %d]", i, j);
JLabel label = new JLabel(text, SwingConstants.CENTER) {
#Override
public Dimension getPreferredSize() {
return labelPrefSize;
}
};
label.setBorder(BorderFactory.createLineBorder(Color.blue));
mainPanel.add(label);
}
}
JOptionPane
.showMessageDialog(null, mainPanel,
"Attempt 2, override getPreferredSize of the JLabel cells in the grid",
JOptionPane.PLAIN_MESSAGE);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}
In the second dialog, I have the JLabels return a preferred size and let the containers that hold them set the best size to display the GUI, and you'll with the second attempt, the grid fits much better.
This displays for the first (bad) attempt a gap between the inner and outer components:
And the second (good) attempt shows no such gap:
GridLayout was supposed to fill up the entire JPanel, and make
everything in it evenly sized
these two are opposing forces, the manager can do both at the same time only if the panel width is a multiple of the column width:
panel.width == column.width * column.count
If that's not possible, it favors the equal-size constraint, by sizing the children to the largest width to make them equal and positions the whole block in the center of parent, thus exposing the parent's background. Basically, you are seeing the effects of integer math :-)
As to the discussion in the other answer,
First off: my take on setXXSize is well known - it's always wrong to use in application code I think it's a design accident, should never have happened in the first place because most of the time it introduces more problems than it seems (superficially!) to solve.
Next-nearest solution seems to override getXXSize: if done to return an arbitrary hard-coded fixed size, it's only marginally better than calling setXXSize (in not propagating worst practices :): the return value should be related to internal state. It should keep internal calculation (if any) of super intact and can modify it. Plus strictly speaking, it should comply to super's contract which indeed states (a bit hidden in setXXSize) that the dimension applied via setXXSize takes precedence
Sets the preferred size of this component to a constant value.
Subsequent calls to getPreferredSize will always return this value.
In code:
// always wrong in application code
someComponent.setPreferredSize(labelPrefSize);
// suboptimal: arbitrary hard-coded fixed size
#Override
public Dimension getPreferredSize() {
return new Dimension(labelPrefSize);
}
// good: fixed value based on internal state
#Override
public Dimension getPreferredSize() {
return new Dimension(labelPrefSize);
}
// the size has some meaning f.i. when painting
#Override
protected void paintComponent(Graphics g) {
g.drawRect(0, 0, labelPrefSize.width, labelPrefSize.height);
}
// good: prefsize relative to super's calculation
#Override
public Dimension getPreferredSize() {
Dimension labelPrefSize = super.getPreferredSize();
int maxSide = Math.max(labelPrefSize.width, labelPrefSize.height);
labelPrefSize.setSize(maxSide, maxSide);
return labelPrefSize;
}
// better: prefsize relative to default calculation
// _and_ comply to super's contract
#Override
public Dimension getPreferredSize() {
Dimension labelPrefSize = super.getPreferredSize();
if (isPreferredSizeSet()) return labelPrefSize;
// any of the good thingies ...
}
Ideally, though, you would not touch the internal calculation of sizing hints at all. Instead, use a LayoutManager that allows to fine tune the layout to exactly suit your needs. Remember: the manager takes the hints and is free to size however she likes anyway :-)
Update
edited the above trying to emphasize the "related to internal state" thingy: sizing hints should return their own isolated, ego-centric requirement without caring about context. So overriding to return something that pleases an outside need is suboptimal.
I've looked at many websites. Without the panels, the labels appear correctly, with the panels it give the the error:
Exception in thread "main" java.lang.NullPointerException
so what can I do to fix this?
here is the source code:
JLabel button[] = new JLabel[100];
JPanel[] panel = new JPanel[100];
for (int i = 0; i < button.length; i++) {
a = a + 50;
if (a > 549) {
b = b + 50;
a = 50;
}
button[i] = new JLabel("hi");
frame.add(button[i]); //is this necessary?
button[i].setVisible(true); // is this necessary?
button[i].setSize(50,50);
panel[i].add(button[i]);
panel[i].setVisible(true);
panel[i].setBounds(a, b, 50, 50);
frame.add(panel[i]);
}
Whats wrong with this, how can I fix it? just so you know, it should have 100 labels that say hi in a 10 by 10 array.
this is what it looks like:
Creating an array of JPanel only creates the array. It doesn't create any JPanel to fill the array. The arrays is thus filled with nulls. You must create a JPanel for each element of the array:
panel[i] = new JPanel();
panel[i].add(button[i]);
Moreover, a component may only have one ancestor. The button must be added to the frame or to the panel, but not both. If you want the button in the panel, it must be added to the panel.
Components are visible by default (except top-level ones like frames or dialogs which must be made visible). You don't need to call button.setVisible(true).
You should definitely learn to use layout managers rather than setting the size and bounds of your components explicitely. That's the only way to have good-looking, portable GUI apps. Read http://docs.oracle.com/javase/tutorial/uiswing/layout/using.html
don't use frame.setLayout(null); use frame.setLayout(new GridLayout(10,10,10,10)); instead, for example
import java.awt.*;
import javax.swing.*;
public class CustomComponent1 extends JFrame {
private static final long serialVersionUID = 1L;
public CustomComponent1() {
setTitle("Custom Component Test / GridLayout");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public void display() {
setLayout(new GridLayout(10, 10, 10, 10));
for (int row = 0; row < 100; row++) {
add(new CustomComponents1());
}
//pack();
// enforces the minimum size of both frame and component
setMinimumSize(getMinimumSize());
setPreferredSize(getPreferredSize());
setVisible(true);
}
public static void main(String[] args) {
Runnable r = new Runnable() {
#Override
public void run() {
CustomComponent1 main = new CustomComponent1();
main.display();
}
};
javax.swing.SwingUtilities.invokeLater(r);
}
}
class CustomComponents1 extends JLabel {
private static final long serialVersionUID = 1L;
#Override
public Dimension getMinimumSize() {
return new Dimension(20, 20);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(20, 20);
}
#Override
public void paintComponent(Graphics g) {
int margin = 10;
Dimension dim = getSize();
super.paintComponent(g);
g.setColor(Color.red);
g.fillRect(margin, margin, dim.width - margin * 2, dim.height - margin * 2);
}
}