I created this prototype of a calculator using scene builder, that works perfectly fine with the set width and height (376x752) but I'm getting many problems while trying to resize the window. How can I prevent that the window cannot be smaller than my already set width and height? Also, when maximizing the window, my VBox containing the Label gets resized to fill the whole horizontal space on the screen, however, the operation buttons still on their position. How can I make the buttons enlarge to fill the horizontal space created after maximizing the window? (I'm trying achieve a behaviour similar to Windows calculator)
<AnchorPane minHeight="752.0" minWidth="376.0" style="-fx-background-color: #17181a;" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1" fx:controller="muri.calc.HelloController">
<VBox alignment="BOTTOM_RIGHT" layoutX="34.0" layoutY="138.0" minHeight="130.0" minWidth="312.0" AnchorPane.leftAnchor="34.0" AnchorPane.rightAnchor="32.0">
<children>
<Label fx:id="resultadoTexto" alignment="CENTER" contentDisplay="CENTER" text="82" textAlignment="RIGHT" textFill="WHITE">
<font>
<Font size="48.0" />
</font>
</Label>
</children>
</VBox>
<!-- Grid for Buttons -->
<GridPane hgap="20" layoutX="32" layoutY="670" prefWidth="310.0" vgap="14" AnchorPane.bottomAnchor="32.0" AnchorPane.leftAnchor="34.0" AnchorPane.rightAnchor="32.0">
<Button fx:id="quadradoBotao" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" prefHeight="62.0" prefWidth="62.0" text="n²" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Button fx:id="porcentBotao" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" prefHeight="62.0" prefWidth="62.0" text="\%" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Button fx:id="raizBotao" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" prefHeight="62.0" prefWidth="62.0" text="√" GridPane.rowIndex="1" />
<!-- First Row -->
<Button fx:id="acBotao" minHeight="31.0" minWidth="62" text="Ac" />
<Button fx:id="dividirBotao" minHeight="62" minWidth="62" text="/" GridPane.columnIndex="3" GridPane.rowIndex="1" />
<Button fx:id="multiplicarBotao" minHeight="62" minWidth="62" text="*" textAlignment="JUSTIFY" GridPane.columnIndex="3" GridPane.rowIndex="2" />
<Button fx:id="subtrairBotao" minHeight="62.0" minWidth="62" prefHeight="63.0" prefWidth="63.0" text="-" GridPane.columnIndex="3" GridPane.rowIndex="3" />
<!-- Second Row -->
<Button fx:id="seteBotao" minHeight="62" minWidth="62" text="7" GridPane.rowIndex="2" />
<Button fx:id="oitoBotao" minHeight="62" minWidth="62" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Button fx:id="noveBotao" minHeight="62" minWidth="62" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2" />
<!-- Third Row -->
<Button fx:id="quatroBotao" minHeight="62" minWidth="62" text="4" GridPane.rowIndex="3" />
<Button fx:id="cincoBotao" minHeight="62" minWidth="62" text="5" GridPane.columnIndex="1" GridPane.rowIndex="3" />
<Button fx:id="seisBotao" minHeight="62" minWidth="62" text="6" GridPane.columnIndex="2" GridPane.rowIndex="3" />
<Button fx:id="somarBotao" minHeight="62.0" minWidth="62" text="+" GridPane.columnIndex="3" GridPane.rowIndex="4" />
<!-- Fourth Row -->
<Button fx:id="umBotao" minHeight="62" minWidth="62" text="1" GridPane.rowIndex="4" />
<Button fx:id="doisBotao" minHeight="62" minWidth="62" text="2" GridPane.columnIndex="1" GridPane.rowIndex="4" />
<Button fx:id="tresBotao" minHeight="62" minWidth="62" text="3" GridPane.columnIndex="2" GridPane.rowIndex="4" />
<!-- Fifth Row -->
<Button fx:id="alterarBotao" minHeight="62" minWidth="62" text="+/-" GridPane.rowIndex="5" />
<Button fx:id="zeroBotao" minHeight="62" minWidth="62" text="0" GridPane.columnIndex="1" GridPane.rowIndex="5" />
<Button fx:id="decimalBotao" minHeight="62" minWidth="62" text="." GridPane.columnIndex="2" GridPane.rowIndex="5" />
<Button fx:id="igualBotao" minHeight="62.0" minWidth="62" text="=" GridPane.columnIndex="3" GridPane.rowIndex="5" />
<Button fx:id="apagarBotao" layoutX="258.0" layoutY="54.0" minHeight="31.0" minWidth="62" prefHeight="31.0" prefWidth="62.0" text="⌫" GridPane.columnIndex="3" />
<columnConstraints>
<ColumnConstraints />
<ColumnConstraints />
<ColumnConstraints />
<ColumnConstraints />
</columnConstraints>
<rowConstraints>
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
</rowConstraints>
</GridPane>
</AnchorPane>
Set 376x752 size After resizing the window
I've already tried to change the grid panes row's percent width and hgrow but it didnt work. sorry for my bad english btw
I have modified your FXML, and I believe the properties you need to adjust are on all the buttons. You should set hgrow and vgrow to SOMETIMES, and also set the maxWidth and maxHeight to MAX_VALUE.
Additionally, I modified the top anchor of the GridPane to stop the buttons from moving above the VBox and also removed the hard-coded width and height from the buttons.
Here is the modified FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane minHeight="752.0" minWidth="376.0" style="-fx-background-color: #17181a;" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1" fx:controller="muri.calc.HelloController">
<VBox alignment="BOTTOM_RIGHT" layoutX="34.0" layoutY="138.0" minHeight="130.0" minWidth="312.0" AnchorPane.leftAnchor="34.0" AnchorPane.rightAnchor="32.0" AnchorPane.topAnchor="138.0">
<children>
<Label fx:id="resultadoTexto" alignment="CENTER" contentDisplay="CENTER" text="82" textAlignment="RIGHT" textFill="WHITE">
<font>
<Font size="48.0" />
</font>
</Label>
</children>
</VBox>
<!-- Grid for Buttons -->
<GridPane hgap="20" layoutX="32" layoutY="670" prefWidth="310.0" vgap="14" AnchorPane.bottomAnchor="32.0" AnchorPane.leftAnchor="34.0" AnchorPane.rightAnchor="32.0" AnchorPane.topAnchor="295.0">
<Button fx:id="quadradoBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" text="n²" GridPane.columnIndex="2" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.vgrow="SOMETIMES" />
<Button fx:id="porcentBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" text="\%" GridPane.columnIndex="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.vgrow="SOMETIMES" />
<Button fx:id="raizBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62.0" mnemonicParsing="false" text="√" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.vgrow="SOMETIMES" />
<!-- First Row -->
<Button fx:id="acBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="31.0" minWidth="62" text="Ac" GridPane.hgrow="SOMETIMES" GridPane.vgrow="SOMETIMES" />
<Button fx:id="dividirBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="/" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.vgrow="SOMETIMES" />
<Button fx:id="multiplicarBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="*" textAlignment="JUSTIFY" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2" GridPane.vgrow="SOMETIMES" />
<Button fx:id="subtrairBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62" text="-" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3" GridPane.vgrow="SOMETIMES" />
<!-- Second Row -->
<Button fx:id="seteBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="7" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2" GridPane.vgrow="SOMETIMES" />
<Button fx:id="oitoBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="8" GridPane.columnIndex="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2" GridPane.vgrow="SOMETIMES" />
<Button fx:id="noveBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="9" GridPane.columnIndex="2" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2" GridPane.vgrow="SOMETIMES" />
<!-- Third Row -->
<Button fx:id="quatroBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="4" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3" GridPane.vgrow="SOMETIMES" />
<Button fx:id="cincoBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="5" GridPane.columnIndex="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3" GridPane.vgrow="SOMETIMES" />
<Button fx:id="seisBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="6" GridPane.columnIndex="2" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3" GridPane.vgrow="SOMETIMES" />
<Button fx:id="somarBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62" text="+" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="4" GridPane.vgrow="SOMETIMES" />
<!-- Fourth Row -->
<Button fx:id="umBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="4" GridPane.vgrow="SOMETIMES" />
<Button fx:id="doisBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="2" GridPane.columnIndex="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="4" GridPane.vgrow="SOMETIMES" />
<Button fx:id="tresBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="3" GridPane.columnIndex="2" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="4" GridPane.vgrow="SOMETIMES" />
<!-- Fifth Row -->
<Button fx:id="alterarBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="+/-" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="5" GridPane.vgrow="SOMETIMES" />
<Button fx:id="zeroBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="0" GridPane.columnIndex="1" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="5" GridPane.vgrow="SOMETIMES" />
<Button fx:id="decimalBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62" minWidth="62" text="." GridPane.columnIndex="2" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="5" GridPane.vgrow="SOMETIMES" />
<Button fx:id="igualBotao" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="62.0" minWidth="62" text="=" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="5" GridPane.vgrow="SOMETIMES" />
<Button fx:id="apagarBotao" layoutX="258.0" layoutY="54.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="31.0" minWidth="62" text="⌫" GridPane.columnIndex="3" GridPane.hgrow="SOMETIMES" GridPane.vgrow="SOMETIMES" />
<columnConstraints>
<ColumnConstraints />
<ColumnConstraints />
<ColumnConstraints />
<ColumnConstraints />
</columnConstraints>
<rowConstraints>
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
<RowConstraints />
</rowConstraints>
</GridPane>
</AnchorPane>