change fontsize in maximize mode

Question

I'm working with JavaFX, I would like to grow the font size of all elements in my project when I press the maximize button placed in the right corner near the 'exit' button, is it possible to do that? My starting project is 800x600 and the font size in 18px, i would like, when the user press the maximize button, the font size becomes for e.g. 24px. I'm using Java 7, NetBeans and Scene Builder. See the images, i would like the text button size when it's fullscreen it's bigger that the little one! So I would like to override the maximize button action! Thank you!

EDIT: I want to increase the font size when the user press this button: How can I do that?

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Clarification of maximize vs full screen

The button you point to in your question is a maximize button. Full screen mode is different from a maximized window (in most windowing systems).

Why you don't want to list to the maximize property

You could a listener to the maximize property of the window and set the font size as you wish based upon the maximize property value, similar to outlined here: Listener for a Stage minimizing, maximizing, etc. However my testing of this is not it is not a very robust solution, because (with the current JavaFX 8u60 implementation of the maximized property on Mac), the listener is fired when the user presses the maximize button (and the maximized property set to true), but if the user later resizes the window manually via the window borders, the maximized property stays true and no listener is fired to note that the window is no longer maximized (this might actually be a bug in a the Mac implementation of JavaFX 8u60). So you can capture the maximize event and resize your UI when maximized, but when no longer maximized there is no event to reset your UI to the normal (un-maximized) view.

Listen to root layout bounds instead

A more robust implementation seems to implement a kind of responsive layout algorithm listening for the current size of the layout bounds for the scene and doing a different layout (or font size) based upon changes in the layout bounds. The concepts are similar to responsive web design, though the implementation is different than on a HTML based web site, as CSS and layout in JavaFX works differently than HTML.

Here is a sample of this approach:

Smaller size window (small font)

The smaller size font is used when the window size is not very large.

Larger size (including maximized or full screen) window (larger font)

A larger font size is used when the window size is larger.

MaximizeFontResponder.java

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class MaximizeFontResponder extends Application {

    private static final String MAXIMIZED_ROOT_STYLE_CLASS = "maximized-root";
    private static final double FONT_SIZE_WIDTH_ON_THRESHOLD = 800;
    private static final double FONT_SIZE_HEIGHT_ON_THRESHOLD = 400;
    private static final double FONT_SIZE_WIDTH_OFF_THRESHOLD = 780;
    private static final double FONT_SIZE_HEIGHT_OFF_THRESHOLD = 380;

    @Override
    public void start(Stage stage) throws Exception {
        StackPane layout = new StackPane(new Label("Now is the time for all good men\nto come to the aid of the party."));

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                MaximizeFontResponder.class.getResource(
                        "font-responder.css"
                ).toURI().toURL().toExternalForm()
        );
        stage.setScene(scene);

        refreshRootFontSize(layout);
        scene.getRoot().layoutBoundsProperty().addListener((observable, oldBounds, newBounds) -> {
            refreshRootFontSize(layout);
        });

        stage.show();
    }

    private void refreshRootFontSize(Pane root) {
        final ObservableList<String> rootStyleClass = root.getStyleClass();
        final Bounds layoutBounds = root.getLayoutBounds();

        if (layoutBounds.getWidth() >= FONT_SIZE_WIDTH_ON_THRESHOLD
                && layoutBounds.getHeight() >= FONT_SIZE_HEIGHT_ON_THRESHOLD
                && !rootStyleClass.contains(MAXIMIZED_ROOT_STYLE_CLASS)) {
            rootStyleClass.add(MAXIMIZED_ROOT_STYLE_CLASS);
        }

        if (layoutBounds.getWidth() <= FONT_SIZE_WIDTH_OFF_THRESHOLD
                || layoutBounds.getHeight() <= FONT_SIZE_HEIGHT_OFF_THRESHOLD) {
            rootStyleClass.remove(MAXIMIZED_ROOT_STYLE_CLASS);
        }
    }

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

font-responder.css

.root { -fx-font-size: 20px; } .maximized-root { -fx-font-size: 40px; }

The technique used in this sample for sizing fonts and UI components based upon CSS defined -fx-font-size is explained in the following answers to related question:

Note on em units and control/layout sizing

Although the example does not include any controls, if it did, those would also be sized larger to accommodate the larger font size as all JavaFX controls are sized based upon em units. If you want the rest of your UI layout to also adapt in the same way, then also size it based upon em units rather than absolute pixels. Note I've linked a HTML based resource for the em unit link (and JavaFX CSS is different from HTML CSS), but the general em concept is similar enough that you should be able to grasp it from the info in that link.

Further Resources

For a more robust solution, you might want to look into:

Hendrik Ebbers: Response Design for JavaFX.

change fontsize in maximize mode

1 Answers1