How to create Splash screen with transparent background in JavaFX

Question

I am trying to create a splash screen like the example I've provded. It seems that AnchorPane does not allow transparent background, I've tried setting the css of the AnchorPane to -fx-background-color: rgba(255,0,255,0.1) ; but the white background still shows up.

All I have in my fxml file is a AnchorPane with ImageView with contain the png image

I've looked everywhere but can't find any solution, any help would be appreciated. Thanks

Buyse

Answer 1

Try this JavaFX splash sample created for the Stackoverflow question: Designing a splash screen (java). And a follow up sample which also provides application initialization progress feedback.

JavaFX does offer the Preloader interface for smooth transfer from splash to application, but the above samples don't make use of it.

The splash samples above also don't do the transparent effect, but this dialog sample shows you how to do that and you can combine it with the previous splash samples to get the effect you want.

The transparent effect is created by:

1. stage.initStyle(StageStyle.TRANSPARENT).
2. scene.setFill(Color.TRANSPARENT).
3. Ensuring your root node is not an opaque square rectangle.

Which is all demonstrated in Sergey's sample.

Related question:

• How to use javaFX Preloader with stand-alone application in Eclipse?

Update Apr 2016 based on additional questions

the preloader image isnt in the foreground. I have tried stage.toFront(), but doesnt help.

A new API was created in Java 8u20 stage.setAlwaysOnTop(true). I updated the linked sample to use this on the initial splash screen, which helps aid in a smoother transition to the main screen.

For Java8+

For modena.css (the default JavaFX look and feel definition in Java 8), a slight shaded background was introduced for all controls (and also to panes if a control is loaded).

You can remove this by specifying that the default background is transparent. This can be done by adding the following line to your application's CSS file:

.root { -fx-background-color: transparent; }

If you wish, you can use CSS style classes and rules or a setStyle call (as demonstrated in Sergey's answer) to ensure that the setting only applies to the root of your splash screen rather than all of your app screens.

See related:

• how to make transparent scene and stage in javafx?

Mash

Thanks guys! Both answer are good but scene.setFill(Color.TRANSPARENT). you don't need to specify the width and height of the scene – Buyse

I was experiencing a milisecond-flick with background visible when the stage was shown. I managed to solve this issue by calling: root.setCache(true); root.setCacheHint(CacheHint.SPEED); (where root is Parent instance). – Chemurgy

When I use stage.initStyle(Transparent), the preloader image isnt in the foreground. I have tried stage.toFront(), but doesnt help. If I switch back to undecorated, it works fine. Any ideas? – Foregather

Unfortunately, that didn't work. I'm using Java 8u66. – Foregather

Answer 2

You need to have transparent Stage and Scene for that. Pane itself doesn't have a color.

public void start(Stage primaryStage) {
    Button btn = new Button("Say 'Hello World'");

    AnchorPane root = new AnchorPane();
    root.getChildren().add(btn);

    // Java 8: requires setting the layout pane background style to transparent
    // https://bugs.openjdk.java.net/browse/JDK-8092764
    // "Modena uses a non-transparent background by default"
    root.setStyle("-fx-background-color: transparent;"); 

    Scene scene = new Scene(root, 300, 250, Color.TRANSPARENT);
    primaryStage.initStyle(StageStyle.TRANSPARENT);
    primaryStage.setScene(scene);
    primaryStage.show();
}

Kitts

how will i unit test this. I simply tried to unit test this but it shows not on fx application thread error. – Corfu

@Corfu take a look at next questions: #11386104 and #10600224 – Kitts