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.
Problems
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.
Therefore, you should make a splash screen in an Android way for getting instance response. Moreover, it should keep the Android splash screen while your C++/Javascript is loading. But unfortunately that the screen will turn dark before the control is handled over to your application.
Moreover, flicker may happen when QQuickWindow become visible.
That is a guide to avoid those problems.
Solution
To demonstrate how it works, I have written an example program. You may use it as a reference:
Example Project:
https://github.com/benlau/androidnative.pri/tree/master/examples/androidnativeexample
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.
Splash.xml
That is a splash drawable with a Qt logo with white background.
2. Create a Custom Theme and set windowBackground to your splash drawable
apptheme.xml
I don’t talk about how it works here. If you are interested to know more, you may read an article from Cutehacks:
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.
Conclusion
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.
Related Discussion:
