Home JavaFX JavaFX Splash Screen

JavaFX Splash Screen

Splash screens are awesome. They allows to engage users when the application load in the background as a loading screen. In this article, we will talk about implementing JavaFX Splash Screen / Loading Screen with animation. For the splash screen, we will provide a fade-in and fade-out transition.

Splash Screen with Fade Animation

In this example, when the program starts, the splash screen will fade in. After some time, the flash screen will fade out.

The algorithm is as follows

Load Preloader with a fade-in effect using FadeTransition
Remove Preloader with a fade-out effect using Fade transition.
On the end of fade-out load the actual content to the frame.

Watch the implementation:-

Let’s have a look at the code. The code is properly commented.

private void loadSplashScreen() {
	try {
		//Load splash screen view FXML
		StackPane pane = FXMLLoader.load(getClass().getResource(("myAwesomeSplashDesign.fxml")));
		//Add it to root container (Can be StackPane, AnchorPane etc)
		root.getChildren().setAll(pane);

		//Load splash screen with fade in effect
		FadeTransition fadeIn = new FadeTransition(Duration.seconds(3), pane);
		fadeIn.setFromValue(0);
		fadeIn.setToValue(1);
		fadeIn.setCycleCount(1);

		//Finish splash with fade out effect
		FadeTransition fadeOut = new FadeTransition(Duration.seconds(3), pane);
		fadeOut.setFromValue(1);
		fadeOut.setToValue(0);
		fadeOut.setCycleCount(1);

		fadeIn.play();

		//After fade in, start fade out
		fadeIn.setOnFinished((e) -> {
			fadeOut.play();
		});

		//After fade out, load actual content
		fadeOut.setOnFinished((e) -> {
			try {
				AnchorPane parentContent = FXMLLoader.load(getClass().getResource(("/main.fxml")));
				root.getChildren().setAll(parentContent);
			} catch (IOException ex) {
				Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
			}
		});
	} catch (IOException ex) {
		Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
	}
}

How to show splash screen until loading gets completed

Sometimes you may want to do some actual work like loading a database or importing something. In this case, we will have to do it in the background while splash screen is shown.

You can do the heavy lifting tasks on the setOnFinished() method of fade-in transition.

fadeIn.setOnFinished((e) -> {
    //Do the loading tasks
    DatabaseImporter.import();
    SomeComplexTask.start();
    //...
    //After the background tasks are done, load the fadeout
    fadeOut.play();
});

Problem with this approach

The above code works fine when the background tasks are not that much (when the tasks complete within couple of seconds max). But if it is a long task, then the JavaFX UI Thread will hang. In this case, you might have to use a separate thread for processing the background tasks.

The reliable solution

You can make use of JavaFX Tasks or JavaFX Services. Then using a task complete listener, you can initiate fade out transition.

fadeIn.setOnFinished((e) -> {
    //Start the Worker Task
    BackgroundWorkerTask task = new BackgroundWorkerTask();
    task.start();
    //After the completion of the task, start fadeOut animation
    task.setOnSucceeded(successEvent -> {
      fadeOut.play();
    });
});

So, that’s how you implement a JavaFX Splash Screen.

See example on GitHub