Complete Guide to Making a Splash Screen for your QML Android Application
It is a guide to make a splash screen for your QML Android Application without black screen and avoid flicker.
There are many ways to create a splash screen for your Android application. But the story is different when it is written in Qt/QML. Try to search in google, you will find several solutions. Basically, you could ignore any solution by C++/QML code only. Because they are started late. Depend on the size of your application, it may take few seconds to show something meaningful.
Moreover, flicker may happen when QQuickWindow become visible.
That is a guide to avoid those problems.
To demonstrate how it works, I have written an example program. You may use it as a reference:
1. Prepare a splash screen
It is not recommended to use a single image as the splash screen. It will be scaled to fill up all the space. Make it as a drawable resource is easier to fit for all devices.
That is a splash drawable with a Qt logo with white background.
2. Create a Custom Theme and set windowBackground to your splash drawable
I don’t talk about how it works here. If you are interested to know more, you may read an article from Cutehacks:
In order to make an app feel fast, it's important that the user sees something immediately when the app launches. I…www.cutehacks.com
3. Modify AndroidManifest.xml
3.1. Within the Activity tag, modify android:theme attribute to your custom theme.
3.2. Set android.app.splash_screen_drawable to your splash drawable
That is the trick to avoid screen turns black for a while before your main() function.
4. Modify your main.qml
Now the control has been handled over to your application. However, you may realise that flicker happens on your QML application startup. There have several reasons, I am not going to explain it in deep. Instead, I will only suggest a startup procedure to avoid it. Unfortunately, it can not get rid of the problem completely. Sometime, it may still happen, but with less chance.
4.1. Set Window.visible to false and Window.color to a color which is similar to splash screen / Theme.windowBackground
4.2. Use an asynchronous Loader to load your content. Set its opacity to 0.
Moreover, you should create an fade-in animation item for the Loader.
4.3. Once your content is ready, set Window.visible to true
So that splash screen will not be cleared before your application is ready.
4.4. Then set Loader.opacity to 1.
According to a discussion on a mailing list, flicker may happen on first time rendering. Currently we have no way to avoid it completely. But I found that showing a pure color image on startup will highly decrease the chance to happen.
That is all of the steps. Although it is a bit of trouble, it should not be difficult to understand. If you can not reproduce it , remember to check the example program and compare the differences with your program.