How to create a splash screen using QML

Question

I am trying to develop an android application using QT. I want to show a splash screen at the start of the application. Splash screen will stay there for 2 seconds then main page of the app will be shown. For this I have created 2 .qml files.

Splash.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.3

Window {
    id: window
    visible: true
    width: Screen.width
    height: Screen.height
    signal timeout

    Image {
        id: image
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 300
        height: 300
        source: "qrc:/../Desktop/photo_2018-03-21_19-53-06.jpg"
    }

    Text {
        id: text1
        y: image.height + image.y + 20
        text: qsTr("@startimeahmet Presents")
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 25
    }

    Timer {
        interval: 2000; running: true; repeat: false
        onTriggered: {
            visible = false
            window.timeout()
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.3

ApplicationWindow {
    id: root
    visible: false
    width: Screen.width
    height: Screen.height

    Splash {
        onTimeout: root.visible = true
    }
}

But this doesn't work. Any help on this is appreciated.

p.s. I am using QT 5.11.1 with QT Creator 4.6.2

Answer 1

Use a native Android splash screen.

1. Create the splash resource in android/res/drawable/splash.xml. Something like

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff"/>
        </shape>
    </item>    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/app"/>
    </item>
</layer-list>

2. Create a theme in android/res/values/apptheme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:statusBarColor">#ffffff</item>
    </style>
</resources>

3. In android/AndroidManifest.xml find the activity element and add this attribute: android:theme="@style/AppTheme" Add these:

   <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/splash"/>
   <meta-data android:name="android.app.splash_screen_sticky" android:value="true"/>
   

4. In you .pro file add

   QT += androidextras

5. In your C++ code add this line when your app is ready:

   QtAndroid::hideSplashScreen(250);

6. Enjoy!

Answer 2

As I said since your ApplicationWindow is invisible and all its children are invisible too, including your splash window. So Splash and ApplicationWindow at least should be siblings. But the better solution is to use Loader as @Mohammad Kanan already noticed. In this case there is an additional advantage - each window will be initialized at appropriate time and will be unloaded after use. The example:

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Loader {
    id: loader
    Component {
        id: splash
        Window {
            id: splashWindow
            signal timeout()
            width: 300
            height: 200
            modality: Qt.ApplicationModal
            flags: Qt.SplashScreen
            color: "#DEDEDE"
            ProgressBar {
                id: progress
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                }
                value: 0
                to : 100
                from : 0
            }
            Timer {
                id: timer
                interval: 50
                running: true
                repeat: true
                onTriggered: {
                    progress.value++;
                    if(progress.value >= 100) {
                        timer.stop();
                        splashWindow.timeout();
                    }
                }
            }
        }
    }

    Component {
        id: root
        Window {
            id: rootWindow
            width: 800
            height: 600
        }
    }

    sourceComponent: splash
    active: true
    visible: true
    onStatusChanged: {
        if (loader.status === Loader.Ready)
            item.show();
    }

    Connections {
        id: connection
        target: loader.item
        onTimeout: {
            connection.target = null;
            loader.sourceComponent = root;
        }
    }
}