JavaFX GridPane buttons in cells are too far from each other - javafx

Question

I wrote a code which adds buttons in a GridPane, everything works as it should when I run the code. Only problem is that the buttons in their cells are too far from each other, the "best" outcome I got is the one below, but it's not good since there's still a barrier between the buttons (and they aren't in the center of the grid).
The code for creating the buttons and adding them to the grid:
for (int i = 0; i < columns; i++) {
for (int j = 0; j < rows; j++) {
b = new Button(" ");
b.setMinSize(30, 30);
b.setMaxSize(30, 30);
b.setStyle("-fx-font-size:11");
bCont.TheBoard.add(b, i, j);
// bCont.TheBoard.setVgap(5.0);
// bCont.TheBoard.setHgap(5.0);
// GridPane.setMargin(b, new Insets(5, 5, 5, 5));
GridPane.setHalignment(b, HPos.CENTER);
GridPane.setValignment(b, VPos.CENTER);
GridPane.setVgrow(b, Priority.ALWAYS);
GridPane.setHgrow(b, Priority.ALWAYS);
}
}
ColumnConstraints constraints = new ColumnConstraints();
constraints.setPercentWidth(85 / columns);
RowConstraints rowconst = new RowConstraints();
rowconst.setPercentHeight(85 / rows);
for (int t = 0; t < columns; t++) {
bCont.TheBoard.getColumnConstraints().add(constraints);
}
for (int t = 0; t < rows; t++)
bCont.TheBoard.getRowConstraints().add(rowconst);
Example of the output (first image is board size of 3x3, second is 10x10):
And in-case the FXML code of the board is also needed:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="853.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MS.BoardCONTROLLER">
<children>
<GridPane fx:id="TheBoard" alignment="TOP_CENTER" layoutX="200.0" layoutY="118.0" AnchorPane.bottomAnchor="90.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
<HBox alignment="BOTTOM_LEFT" fillHeight="false" layoutX="14.0" layoutY="560.0" prefHeight="51.0" prefWidth="290.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="700.0" AnchorPane.topAnchor="560.0">
<children>
<Button fx:id="BackMenu" mnemonicParsing="false" onAction="#BackMenu" text="Back to menu" />
<Button fx:id="ResetBoard" mnemonicParsing="false" onAction="#ResetBoard" text="Reset" textFill="RED">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Button>
<Button fx:id="Music" mnemonicParsing="false" onAction="#Music" text="Music">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Button>
</children>
</HBox>
</children>
</AnchorPane>
Thank you.
More info - if I make the scene's window smaller as shown in the image below, the cells will be closer to each other (and if I make it even smaller they will "step" on each other):

Answer 1

Try this code
Parent root = FXMLLoader.load(App.class.getResource("App.fxml"));
Scene scene = new Scene(root);
primaryStage.setTitle("Example");
primaryStage.setScene(scene);
primaryStage.show();
int i=0;
int j=0;
GridPane gridPane = (GridPane)scene.lookup("#mygrid");
for(i=0;i<30;i++) {
for(j=0;j<12;j++) {
Button button1 = new Button(" ");
gridPane.add(button1, i, j, 1, 1);
}
}
FXML
<AnchorPane prefHeight="400.0" prefWidth="600.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.zigma.Controller">
<children>
<GridPane AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" fx:id="mygrid">
</GridPane>
<BorderPane maxHeight="50.0" minHeight="50.0"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0">
<center>
<Button fx:id="mybutton" maxHeight="50"
mnemonicParsing="false" prefHeight="50.0"
prefWidth="200.0" text="Button" visible="false" />
</center>
</BorderPane>
</children>
</AnchorPane>
You will get this output