JavaFX Square Button

Sheeraz Gul Jul 07, 2022
JavaFX Square Button

The square buttons can be created by extending the ToolBar class in Java. This tutorial demonstrates how to create a square button in JavaFX.

Create Square Button in JavaFX

Buttons are created by instantiating the Button class in JavaFX. The buttons are used to execute some activities in JavaFX.

It is represented by JavaFX.scene.control.Button class. The button can have a text or icon on it.

We need to set the button’s size to create the square button. The following functions are used to manipulate the size of the button in JavaFX.





We can use the methods above to set the size of a button to make it square. Follow the steps below to create a square button in JavaFX:

  • First, create a class by extending the Application class.
  • Implement the start() method.
  • Create the buttons by instantiating the class Button.
  • Create another class that extends the ToolBar Class. This class will have a method layoutChildren().
  • The layoutChildren() method will specify the size for the button. We can use the setPrefWidth() and setPrefHeight() with the same values to create square buttons.
  • Create an object of the class which inherits the ToolBar class, instantiate the class and pass the buttons to it.
  • Create a Border Pane by instantiating the BorderPane Class and passing the above object of the ToolBar class.
  • Create a scene object, instantiate the scene class, and pass the BorderPane object to the scene.
  • Add a scene to the stage using the setScene() method.
  • Display the stage using the show() method.
  • Finally, Launch the application.

Full Source Code:

package delftstack;

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class JavaFX_Square_Button extends Application {

    public void start(Stage Demo_Stage) {

        Button Button1 = new Button("One");
        Button Button2 = new Button("Two Two");
        Button Button3 = new Button("Three Three Three");

        Square_Button_ToolBar Tool_Bar = new Square_Button_ToolBar();
        Tool_Bar.getItems().addAll(Button1, Button2, Button3);

        BorderPane Border_Pane = new BorderPane();

        Scene Demo_Scene = new Scene(Border_Pane, 500, 500);


    // A derivative of the ToolBar class to resize all buttons of the same size and square.
    class Square_Button_ToolBar extends ToolBar {

        protected void layoutChildren() {
            double Min_Pref_Size = Calculate_Pref_Child_Size();
            for (Node x : getItems()) {
                if (x instanceof Button) {
                    ((Button) x).setPrefWidth(Min_Pref_Size);
                    ((Button) x).setPrefHeight(Min_Pref_Size);
        private double Calculate_Pref_Child_Size() {
            double Min_Pref_Size = 0.0d;
            for (Node x : getItems()) {
                if (x instanceof Button) {
                    Min_Pref_Size = Math.max(Min_Pref_Size, x.prefWidth(-1));
            return Min_Pref_Size;

    public static void main(String[] args) {

The code above will create the square button of the size in which the text is fitted.


JavaFX Square Button

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Related Article - Java JavaFX