Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Simple Splash Screen in QML

From Wiki
Jump to: navigation, search
Featured Article
26 Feb

This article demonstrates one way to create a Qt Quick splash screen component with simple animations.

Article Metadata
Code ExampleTested with
Devices(s): Nokia E7-00, Nokia N8-00
Platform(s): Qt 4.7, Qt Quick 1.0
Keywords: Image, SequentialAnimation, SplashScreen
Created: gaba88 (02 Jun 2011)
Updated: croozeus (23 Feb 2012)
Last edited: hamishwillee (29 Jun 2012)



A Splash Screen is a "view" that is displayed when your app is first started. Splash screens are used to provide app branding, including information like its developer and publisher. They are often also used to distract the user while long-running actions required to start the app are performed in the background. For example, an app might connect to the Internet and fetch information while the screen is displayed.

There are many ways to implement a Splash Screen in QML. In this code snippet we show one of the simplest - an image that is displayed for a number of seconds on app startup and then faded. The Splash Screen is declared as a re-usable component that is used within the app's main QML file.

More advanced splashscreens can also be developed using different QML elements.

SplashScreen Component

Our SplashScreen uses two important QML elements:

  • Image - loads an image from our resources
  • SequentialAnimation - does nothing for 4 seconds, then quickly fades the image.

The Image is used to load our image from the apps resources. It's value is a property in SplashScreen so we can change the image used when we use the component.

The SequentialAnimation contains a PauseAnimation, which does nothing for 4.2 seconds, followed by a PropertyAnimation which animates image's opacity property to zero over 0.7 seconds. When the animation completes the SplashScreen emits a signal - the app can use this to perform its next actions.

The code below is created in a file SplashScreen.qml in the main app directory:

import QtQuick 1.0
Item {
id: splashScreenContainer
// image source is kept as an property alias, so that it can be set from outside
property alias imageSource: splashImage.source
// signal emits when splashscreen animation completes
signal splashScreenCompleted()
Image {
id: splashImage
source: imageSource
anchors.fill: splashScreenContainer // do specify the size and position
// simple QML animation to give a good user experience
SequentialAnimation {
PauseAnimation { duration: 4200 }
PropertyAnimation {
target: splashImage
duration: 700
properties: "opacity"
onCompleted: {
//starts the splashScreen
Component.onCompleted: splashanimation.start()

Using the SplashScreen component

We use the SplashScreen component as shown in the following code snippet. The component's onSplashScreenCompleted() handler is used by the app to determine its next operation.

import QtQuick 1.0
Rectangle {
width: 360; height: 640
imageSource: "images/splashscreen.png"
anchors.fill: parent
onSplashScreenCompleted: {
// do whatever you want splash screen loaded completely
console.log("Splash Screen Loaded");


Here's the screenshot of the project on desktop, the splash screen disappear animation occurs as well.

QML Splash screen.png


This is one of the simplest approaches to making a SplashSreen QML Component. It can be extended to make some more animated splashscreen using other QML Elements.

This page was last modified on 29 June 2012, at 01:23.
120 page views in the last 30 days.