JavaFX button padding changes button size

Question

Note: JavaFX newbie

Some Docs

Buttton.setPadding 

doc page

So everyone knows what padding is, but here is an example for Android to clarify.

Problem:

Setting (and changing) the padding on a javafx button increases the size of the button, but not the "space" between itself and it's (adjacent) neighbour.

More Info:

I would like to have a space between the Exit and Reset buttons.

Assume:

Button btnExit = new Button("Exit");

Padding is usually done by simply setting :

btnExit.setPadding(new Insets(10))   //10 px "buffer" around button

or

btnExit.setPadding(new Insets(0, 10, 0, 0))   //10 px "buffer" on right only

I do this will an all-around padding, but instead of creating this buffer, it enlarges the button size.

No padding (btnExit.setPadding(new Insets(0));)

PADDING_LARGE=10

With padding (btnReset.setPadding(new Insets(PADDING_LARGE));)

Code:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.Border;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.scene.control.Button;

public class SOS extends Application{

    private int GRID_SIZE = 5;
    private int PADDING_MEDIUM = 5;
    private int PADDING_LARGE = 10;
    private int PADDING_XLARGE = 20;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        //create display boxes
        VBox vbRoot = new VBox(),
                vbGrid = new VBox(),
                vbFooter = new VBox(),
                vbPlayers = new VBox(),
                vbGridInfo = new VBox(),
                vbHeader = new VBox();
        HBox hbOptions = new HBox(),
                hbDone = new HBox(),
                hbGameDetails = new HBox(),
                hbGameTitle = new HBox();

        //=====================HEADER=================================
        Label title = new Label("SOS Game");
        title.setFont(new Font(16));
        hbGameTitle.getChildren().add(title);
        hbGameTitle.setAlignment(Pos.CENTER);

        Label player1 = new Label("Player 1 = ");
        Label player2 = new Label("Player 2 = ");
        vbPlayers.getChildren().addAll(player1,player2);
        vbPlayers.setAlignment(Pos.CENTER);

        Label lblGridPosOpen = new Label("Places Open = ");
        vbGridInfo.getChildren().add(lblGridPosOpen);
        vbGridInfo.setAlignment(Pos.CENTER);

        //add player and grid info boxes to game details box
        hbGameDetails.getChildren().addAll(vbGridInfo, vbPlayers);

        //add game title and game info boxes to header
        vbHeader.getChildren().addAll(hbGameTitle, hbGameDetails);


        //=====================GRID====================================
        GridPane grid = getGrid(GRID_SIZE);

        //add grid object to grid pane
        vbGrid.getChildren().addAll(grid);
        vbGrid.setPadding(new Insets(PADDING_XLARGE));
        vbGrid.setAlignment(Pos.CENTER);

        //======================FOOTER================================
        //set DONE button with padding and callback
        Button btnDone = new Button("DONE");

        btnDone.setMinWidth(130);
        btnDone.setMinHeight(50);
        btnDone.setOnAction(event -> checkSOS());
        btnDone.setPadding(new Insets(PADDING_MEDIUM));

        //add button done to box
        hbDone.getChildren().add(btnDone);
        hbDone.setPadding(new Insets(PADDING_MEDIUM));
        hbDone.setAlignment(Pos.CENTER);

        //set Exit and Reset buttons with padding and callbacks
        Button btnExit = new Button("Exit");
        Button btnReset = new Button("Reset");

        btnExit.setMinWidth(60);
        btnExit.setMinHeight(25);
        btnExit.setPadding(new Insets(PADDING_LARGE));
        btnExit.setOnAction(event -> System.exit(0));

        btnReset.setMinWidth(60);
        btnReset.setMinHeight(25);
        btnReset.setPadding(new Insets(PADDING_LARGE));
        btnReset.setOnAction(event -> reset());

        //add exit and reset buttons to options box
        hbOptions.getChildren().addAll(btnExit, btnReset);
        hbOptions.setPadding(new Insets(PADDING_MEDIUM));
        hbOptions.setAlignment(Pos.CENTER);

        //add done and options boxes to footer
        vbFooter.getChildren().addAll(hbDone, hbOptions);

        //=====================COMBINE ALL======================

        //combine all sections with padding
        vbRoot.getChildren().addAll(vbHeader, vbGrid, vbFooter);
        hbOptions.setPadding(new Insets(PADDING_MEDIUM));

        //=====================SET STAGE===========================
        primaryStage.setTitle("SOS by :)");
        primaryStage.setScene(new Scene(vbRoot));
        primaryStage.setResizable(false);
        primaryStage.show();
    }

    /**
     * Returns a new grid with buttons
     * @param size  Size of grid
     * @return  new grid
     */
    private GridPane getGrid(int size) {
        GridPane grid = new GridPane();
        for (int i = 0; i < size; i++) {
            for (int j = 0; j < size; j++) {
                grid.add(getSOSButton(), i, j);
            }
        }
        return grid;
    }

    /**
     * Returns a button with callback to change text
     * @return
     */
    private Button getSOSButton(){
        //create button
        Button b = new Button();
        b.setMinHeight(50);
        b.setMaxHeight(50);
        b.setMinWidth(50);
        b.setMaxWidth(50);

        //set callback
        b.setOnAction(event -> b.setText((b.getText().equals("O") || b.getText().isEmpty()) ? "S" : "O"));
        return b;
    }

    private void reset(){

    }

    private void checkSOS(){

    }
}

Answer 1

Padding in JavaFX is supposed to increase the button size, but it does not affect the area outside the button. Padding refers to the area inside the button, but around the text, therefore, "padding" for the text. If you want padding for the outside of the button, you must change the containing node (in this case hbOptions) either in the constructor, like this:

HBox hbOptions = new HBox(numberValueInPointsByWhichYouWantToSeparateYourButtons);

or by calling

hbOptions.setSpacing(numberValueInPointsByWhichYouWantToSeparateYourButtons);

This setSpacing(double spacing) method refers to spacing of the child nodes of the HBox, in this case, your two buttons.

(Help for this answer came from Adding space between buttons in VBox and the HBox documentation).