java - How to make buttons retain their size in FXML -
so button normal when program starts if decrease size window cursor horizontally or vertically, buttons shrink smaller size.
code
fxml file
<?import java.lang.*?> <?import java.net.*?> <?import javafx.scene.shape.*?> <?import javafx.scene.text.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.image.*?> <?import java.net.url?> <vbox fx:id="optionmenulayout" alignment="top_center" spacing="15" prefwidth="1366" prefheight="768" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.optionscreencontroller"> <stylesheets> <url value="@backgroundimages.css" /> </stylesheets> <stylesheets> <url value="@buttonlayout.css" /> </stylesheets> <children> <imageview fitheight="300" fitwidth="300" smooth="true" > <image> <image url="@imagefiles/millionairelogo1.png" /> </image> </imageview> <label style="-fx-font-style: italic;" text="click change background color" textfill="white"> <font> <javafx.scene.text.font name="sans-serif" size="20" /> </font> </label> <hbox alignment="center" spacing="200"> <children> <button id="smallbluebackground1" fx:id="optionbutton1" onaction="#changebackgroundscreen" prefheight="50" prefwidth="80" /> <button id="smallbluebackground2" fx:id="optionbutton2" onaction="#changebackgroundscreen" prefheight="50" prefwidth="80" /> <button id="smallbluebackground3" fx:id="optionbutton3" onaction="#changebackgroundscreen" prefheight="50" prefwidth="80" /> </children> </hbox> <region prefheight="200.0" prefwidth="200.0" vbox.vgrow="always" /> <hbox alignment="bottom_right" spacing="10"> <children> <button fx:id="backtomain" onaction="#gotothemainmenu" prefheight="30" prefwidth="200" id="buttonlayout" text="back main menu"> <shape> <javafx.scene.shape.rectangle archeight="30" arcwidth="30" height="30" width="200" /> </shape> </button> </children> </hbox> </children> </vbox> here screenshot: note resized screen cursor show this right not size of screen
as can see, buttons not regular size.
here css file(if need be) associated 3 main buttons see in screenshot
#bluebackground1 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor.jpg"); -fx-smooth: true; -fx-background-position: center center; } #bluebackground2 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor2.jpg"); -fx-smooth: true; -fx-background-position: center center; } #bluebackground3 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor3.jpg"); -fx-smooth: true; -fx-background-position: center center; } #smallbluebackground1 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor.jpg"); -fx-background-repeat: stretch; -fx-background-size: 80 50; -fx-background-position: center center; -fx-background-insets: 0, 0, 0, 0; -fx-border-color: black; -fx-border-width: 3; -fx-border-style: solid; -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); } #smallbluebackground2 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor2.jpg"); -fx-background-repeat: stretch; -fx-background-size: 80 50; -fx-background-position: center center; -fx-background-insets: 0, 0, 0, 0; -fx-border-color: black; -fx-border-width: 3; -fx-border-style: solid; -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); } #smallbluebackground3 { -fx-background-image: url("/millionairetriviagame/imagefiles/bluebackgroundcolor3.jpg"); -fx-background-repeat: stretch; -fx-background-size: 80 50; -fx-background-position: center center; -fx-background-insets: 0, 0, 0, 0; -fx-border-color: black; -fx-border-width: 3; -fx-border-style: solid; -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); }
if want have dynamic dimensions shouldn't use min/pref/max size. instead should use proper layout containers. example use e. g.
- vbox entire screen
- a top , bottom stackpane in vbox
- a gridpane in bottom stackpane buttons
and let button dimensions computed.
something this:
<?xml version="1.0" encoding="utf-8"?> <?import javafx.geometry.*?> <?import javafx.scene.shape.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <vbox maxheight="-infinity" maxwidth="-infinity" minheight="-infinity" minwidth="-infinity" prefheight="600.0" prefwidth="800.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"> <children> <stackpane vbox.vgrow="always" /> <stackpane vbox.vgrow="always"> <children> <gridpane hgap="10.0" vgap="10.0"> <columnconstraints> <columnconstraints hgrow="always" /> <columnconstraints hgrow="always" /> </columnconstraints> <rowconstraints> <rowconstraints vgrow="always" /> <rowconstraints vgrow="always" /> </rowconstraints> <children> <button maxheight="1.7976931348623157e308" maxwidth="1.7976931348623157e308" mnemonicparsing="false" text="button" gridpane.hgrow="always" /> <button maxheight="1.7976931348623157e308" maxwidth="1.7976931348623157e308" mnemonicparsing="false" text="button" gridpane.columnindex="1" gridpane.hgrow="always" /> <button maxheight="1.7976931348623157e308" maxwidth="1.7976931348623157e308" mnemonicparsing="false" text="button" gridpane.hgrow="always" gridpane.rowindex="1" /> <button maxheight="1.7976931348623157e308" maxwidth="1.7976931348623157e308" mnemonicparsing="false" text="button" gridpane.columnindex="1" gridpane.hgrow="always" gridpane.rowindex="1" /> </children> <stackpane.margin> <insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </stackpane.margin> </gridpane> </children> </stackpane> </children> </vbox> note: "1.7976931348623157e308" values max_value in scene builder.