How To Enable On Click Button Formatting, and Increase Text Size With Window

Question

I am trying to solve an issue with a calculator project I am working on with javafx 11 and java11 using Scene Builder. I do not know how to make the text font of in my buttons increase as the window/ button size increases. I was able to make the button responsive but not the text within the button. I have the scene built with fxml, and have most of my code within a controller class.

To make the buttons responsive I dropped them inside an anchor pane that is attached to a anchored to a grid pane. I have been unable to find a method or control for changing text size.

Main.java:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = 
            FXMLLoader.load(getClass().getResource("calculator.fxml"));
        primaryStage.getIcons().add(new Image("CALC.png"));
        primaryStage.setTitle("TS Calculator");
        primaryStage.setScene(new Scene(root, 250, 375));
        primaryStage.setResizable(true);
        primaryStage.setMinHeight(375);
        primaryStage.setMinWidth(250);
    }

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

FXML: (only showing one of the buttons)

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane maxHeight="1.7976931348623157E308" 
maxWidth="1.7976931348623157E308" minHeight="306.00" minWidth="204.0"
          prefHeight="288.0" prefWidth="208.0" style="-fx-background- 
color: DARKSLATEGREY; -fx-border-color: green;"
          stylesheets="@styles.css" 
xmlns="http://javafx.com/javafx/11.0.1" 
xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="com.trevorsmith.Controller"
          onKeyReleased="#acceptKeyboardInput" >
   <AnchorPane prefHeight="200.0" prefWidth="200.0" 
GridPane.columnSpan="4" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS" 
onKeyPressed="#acceptKeyboardInput">
      <children>
                <TextField fx:id="textFieldDisplay"  editable="false" 
alignment="CENTER_RIGHT" maxHeight="1.7976931348623157E308" 
maxWidth="1.7976931348623157E308" prefWidth="196.0" 
AnchorPane.bottomAnchor="2.0" AnchorPane.leftAnchor="2.0" 
AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="2.0" />
      </children>
   </AnchorPane>
   <AnchorPane maxHeight="1.7976931348623157E308" 
maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" 
GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
      <children>
          <Button maxHeight="1.7976931348623157E308" 
maxWidth="1.7976931348623157E308" text="0" AnchorPane.bottomAnchor="0.0" 
AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="0.0" 
AnchorPane.topAnchor="0.0" />
      </children>

CSS:

Button{
-fx-background-color: black;
-fx-text-align: center;
-fx-text-fill: white;
-fx-border-color: green;
-fx-font-size: 1em;
-fx-border-radius: 10 10 10 10;
-fx-background-radius: 10 10 10 10;
}
Button:pressed{
-fx-background-color: green;
}
TextField{
-fx-font-size: 1.5em;
}

I thought that the font would change with button size, or there would be an simple method to change size, but have not been able to find one. I was expecting there to be an FXML, or CSS simple solution for this.

Raw · Answer 1 · 2019-07-26T05:55:05.087

try it with the . - class selector

.button {
...
-fx-font-size:40;
}

so it will fit the size of all buttons.

You can read more in the offiziel documentation CSS Style

Update Example with Bindings

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class FontBind extends Application {

    private DoubleProperty fontSize = new SimpleDoubleProperty(10);
    private IntegerProperty blues = new SimpleIntegerProperty(50);

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("click me, I change color");
        btn.setOnAction((evt)->{blues.set(blues.get()+20);});//max?
        Label lbl = new Label("I'm a label");
        TextArea ta = new TextArea("Lots of text can be typed\nand even number 1234567890");
        HBox hbox = new HBox(new Label("I never change"));
        VBox child = new VBox(btn, lbl, ta);
        VBox root = new VBox(child, hbox);
        Scene scene = new Scene(root, 300, 250);

        fontSize.bind(scene.widthProperty().add(scene.heightProperty()).divide(50));
        child.styleProperty().bind(Bindings.concat("-fx-font-size: ", fontSize.asString(), ";"
                                                  ,"-fx-base: rgb(100,100,",blues.asString(),");"));

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

This Code is from brian see his post Bind Font Size in JavaFX?

I can change the font size in the css this way, but I cannot find a way to make the font increase/ decrease with the width/height of the scene. I made the change per the recommendation, but the size of the font in the button does not change. — tsProgrammer, Jul 25 '19 at 22:17
You can do this by an `Listener` or maybe with `Bindings` in `JavaFx` — Raw, Jul 26 '19 at 05:50

How To Enable On Click Button Formatting, and Increase Text Size With Window

1 Answers1