I can't get a transparent stage in JavaFX

Question

Here is my code, I'm trying to load a splash screen image with transparent background before my main stage starts. They come almost at the same time, but the big problem is I get a grey rectangle before anything else: .

Here is the code:

public class Menu extends Application {

    private Pane splashLayout;
    private Stage mainStage;
    private ImageView splash;

    // Creating a static root to pass to ScreenControl
    private static BorderPane root = new BorderPane();

    public void start(Stage splashStage) throws IOException {

        final Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
        this.splash = new ImageView(new Image(getClass().getResource("/splash.png").toString()));

        splashStage.initStyle(StageStyle.TRANSPARENT);      
        showSplash(splashStage, screenSize);

        // Constructing our scene using the static root
        root.setCenter(new ScrollPane);
        Scene scene = new Scene(root, screenSize.getWidth(), screenSize.getHeight());
        showMainStage(scene);

        if (splashStage.isShowing()) {
            mainStage.setIconified(false);
            splashStage.toFront();
            FadeTransition fadeSplash = new FadeTransition(Duration.seconds(1.5), splashLayout);
            fadeSplash.setDelay(Duration.seconds(3.5));
            fadeSplash.setFromValue(1.0);
            fadeSplash.setToValue(0.0);
            fadeSplash.setOnFinished(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent actionEvent) {
                    splashStage.hide();
                }
            });
            fadeSplash.play();
        }
    }

    private void showMainStage(Scene scene) {
        mainStage = new Stage(StageStyle.DECORATED);    
        mainStage.setTitle("book-depot");
        mainStage.getIcons().add(new Image(getClass().getResourceAsStream("/icon.png")));
        mainStage.setScene(scene);
        mainStage.show();
    }

    private void showSplash(Stage splashStage, Dimension screenSize) {
        splashLayout = new StackPane();
        splashLayout.setStyle("-fx-background-color: transparent;");
        splashLayout.getChildren().add(splash);
        Scene splashScene = new Scene(splashLayout, 690, 590);
        splashScene.setFill(Color.TRANSPARENT);
        splashStage.setScene(splashScene);
        splashStage.show();
    }

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

}

Am I doing something wrong or I really can't get a transparent background?

This is what it looks like when also the other stage loads up, but I'd like it to work like that even before the main stage loads, or at least I'd want to remove the grey rectangle you can see in the other screenshot

Answer 1

The grey background is your "mainStage" since you are showing splash and main stages at the same time. At the beginning while showing the splash stage you can just init (not show) the main stage and show it later when the animation finishes:

public class ModifiedMenu extends Application
{

    private Pane splashLayout;
    private Stage mainStage;
    private ImageView splash;

    // Creating a static root to pass to ScreenControl
    private static BorderPane root = new BorderPane();

    public void start(Stage splashStage) throws IOException {

        final Dimension2D screenSize = Toolkit.getDefaultToolkit().getScreenSize();
        this.splash = new ImageView(new Image(getClass().getResource("/splash.png").toString()));

        splashStage.initStyle(StageStyle.TRANSPARENT);      
        showSplash(splashStage, screenSize);

        // Constructing our scene using the static root
        root.setCenter(new ScrollPane());
        Scene scene = new Scene(root, screenSize.getWidth(), screenSize.getHeight());
        initMainStage(scene);

        if (splashStage.isShowing()) {
            splashStage.toFront();
            FadeTransition fadeSplash = new FadeTransition(Duration.seconds(1.5), splashLayout);
            fadeSplash.setDelay(Duration.seconds(3.5));
            fadeSplash.setFromValue(1.0);
            fadeSplash.setToValue(0.0);
            fadeSplash.setOnFinished(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent actionEvent) {
                    splashStage.hide();
                    mainStage.show();
                }
            });
            fadeSplash.play();
        }
    }

    private void initMainStage(Scene scene) {
        mainStage = new Stage(StageStyle.DECORATED);    
        mainStage.setTitle("book-depot");
        mainStage.getIcons().add(new Image(getClass().getResourceAsStream("/icon.png")));
        mainStage.setScene(scene);
    }

    private void showSplash(Stage splashStage, Dimension2D screenSize) {
        splashLayout = new StackPane();
        splashLayout.setStyle("-fx-background-color: transparent;");
        splashLayout.getChildren().add(splash);
        Scene splashScene = new Scene(splashLayout, 690, 590);
        splashScene.setFill(Color.TRANSPARENT);
        splashStage.setScene(splashScene);
        splashStage.show();
    }

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

}