Qt on Android : Working example of a splash screen

fantoine

I'm trying to create a custom splash screen for an Android application.
I already noticed there is a splash layout for this purpose but I can't edit it since it's always overwritten by the default one.

I can't find any working sample code for a custom splash screen. Has anybody already done this kind of thing?

Thanks

Larpon

I think some has had some luck with it - I can't get it to work either.

I've managed to get the screen color just before my app loads changed from white to black (it was black on 5.2 and with 5.3 it's white for some reason).
You can add files to, and override files in, the default android project created by Qt by adding a directory in your project root e.g.:
@ mkdir /path/to/project/android-build @

(Also see "This post":http://blog.qt.digia.com/blog/2013/10/09/android-deployment-in-qt-5-2/ for a more in-depth write up)
And then tell the Android plugin where it can find your custom overrides by putting the following line somewhere in your .pro file:

@ ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android-build @

Now you can put files in /path/to/project/android-build as if it was a normal Android project dir e.g.:

@
/path/to/project/android-build/AndroidManifest.xml
/path/to/project/android-build/layout/splash.xml
@

I can't get the splash to show anything though neither with Qt5.2 or 5.3. The files get overridden fine so I don't know what the problem is - but maybe see if you can get further from there? - please do post your solution if you manage to get it working :)

Larpon

Got it working with Qt5.3 because they've fixed some bugs on this specific issue. Here's how I got it working:

1. Make your "splash.png" image and copy the different versions in:

/path/to/project/android-build/res/drawable-mdpi/splash.png
/path/to/project/android-build/res/drawable-ldpi/splash.png
/path/to/project/android-build/res/drawable-hdpi/splash.png

Make the directories as described above or use Qt Creator to give your Android build an icon and the directories will be created for you.

2. Copy over or merge the AndroidManifest.xml template from your Qt install:

cp /path/to/Qt/5.3/android_armv7/src/android/java/AndroidManifest.xml /path/to/project/android-build/AndroidManifest.xml

(I had to merge mine as I had a custom one from my Qt5.2 project already)

3. Uncomment the line in the manifest so it will read:

<!-- Splash screen -->
            <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/splash"/>
<!-- Splash screen -->

If your named your image different than "splash.png" then edit:
@drawable/splash to @drawable/<your image name>

That's it :)

The only drawback is that you for some reason can't use Android Layouts as splash screens - but that's a different topic.

Also see this tutorial by @benlau which applies the same principles

metaDom

In case your using Qt with C++, you can also use the main.cpp with the following code to display a splashscreen on mobile platforms. Both ways have their pros and cons...

Works fine on Android and iOS, WinPhone untested.

@#include "mainwindow.h"
#include <QApplication>
#include <QSplashScreen>
#include <QTimer>

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;

QPixmap pixmap(":/images/splash.png");
QSplashScreen splash(pixmap);
splash.show();

QTimer::singleShot(3000, &splash, SLOT(close()));
QTimer::singleShot(3000, &w, SLOT(show()));

return a.exec(&#41;;

}
@

DerMas

@dominik

What do you have to do in order include the QSplashScreen? Do you have to add something to the project file? Because I get only a "QSplashScreen no such file or directory" at the #include line.

ltr6

[quote author="DerMas" date="1404133192"]@dominik

What do you have to do in order include the QSplashScreen? Do you have to add something to the project file? Because I get only a "QSplashScreen no such file or directory" at the #include line.[/quote]

In .pro file:

QT += widgets

DerMas

Works, thanks :-)

Brexis

Hi. If your are interested to make an animated Splash screen in QML, see "this post":https://qt-project.org/forums/viewthread/36745

Muhammad

#Larpon, I'm using Qt 5.3.1 and I used Qt creator to create the manifest file.
In the splash screen section I see that the name set in
@@drawable/logo@

is the name of my logo. I don't know why, this should be for the splash screen, but it's not. I tried to change it manually, and I did put the splash in inside the

@/path/to/project/android-build/res/drawable-mdpi/splash.png
/path/to/project/android-build/res/drawable-ldpi/splash.png
/path/to/project/android-build/res/drawable-hdpi/splash.png@

but when I run the application all of this gets overwritten and the manifest return back to it's logo and I don't find the splash image in the directories above.
Any Idea

Muhammad

#dominik.fehr, I also used the way you specified, it did work and show the splash screen, but the application still shows a black screen for around 4 seconds before showing the splash screen and then the application. apparently this splash is not a splash it is a part of the application.
Any Idea
Thanks

DerMas

#Baso
Also on 5.3.1 and it works perfectly with the AndroidManifest method posted by Larpon.

Are you editing the right folder? Since everything gets overwritten, it sounds like you are editing the android output folder and not the soure folder.

Check if the project file has the line:
@ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android_build@
(Btw. since my project is quite old, the androidsource folder isnt called "android_build", but only "android". So check if the folder specified in the project file is the same, you use for your custom android files).

Muhammad

#DerMas
You are right, I was editing the output folder. I edited the one in the project folder and everything works just fine.
Thank you DerMas and thanks everybody.

nologinma

[code]
#include "mainwindow.h"
#include <QApplication>
#include <QSplashScreen>
#include <QTimer>

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;

QPixmap pixmap(":/images/splash.png");
QSplashScreen splash(pixmap);
splash.show();

QTimer::singleShot(3000, &splash, SLOT(close()));
QTimer::singleShot(3000, &w, SLOT(show()));

return a.exec&#40;&#41;;

}
[/code]
This example work well but there is a big (for me) problem when I run the app in the Android device (no emulation).

Before that the Splash Screen part, for a second the MainWindow showing the incon associated upper left. After start the Splash Screen and then the MainWindow.

The intial second of the MainWindow is deleterious.

I tried the following solution, but it does not work well at 100%

[code]
#include "mainwindow.h"
#include <QApplication>
#include <QSplashScreen>
#include <QTimer>

int main(int argc, char *argv[])
{
QApplication a(argc, argv);

QPixmap pixmap(":/images/splash.png");
QSplashScreen splash(pixmap);
splash.show();

MainWindow w;

QTimer::singleShot(3000, &splash, SLOT(close()));
QTimer::singleShot(3000, &w, SLOT(show()));

return a.exec(&#41;;

}
[/code]

If I run the app in my desktop I haven't problem.

Inside the MainWindow I have a Menu.

If I remove the Menu from MainWindow I haven't the problem.

benlau

In case you found that the action bar with your application name is shown together with your splash image. You may add this attribute to <activity> tag

@
android:theme="@android:style/Theme.Holo.Light.NoActionBar"
@

nologinma

Thank you for the response but it doesn't resolve my problem.

if I add the following code:

@android:theme="@android:style/Theme.Holo.Light.NoActionBar"@

the splash screen is without action bar but also the next screen is without action bar.

The same result if I use:

@android:theme="@android:style/Theme.NoTitleBar"@

My application show the application screen without Title bar (ok) and after the next screen show the Title bar (perfect).

My problem is that the screen before splash screen (about 1 second) show the Title bar after it hide and show the Splash screen and after the screen with the title bar.

benlau

Hi,

FYI, I have written an article about how to create a splash screen with instant response and will not turn black:

Complete Guide to Making a Splash Screen for your QML Android Application — Medium

Pradeep P N

Hi @benlau

But how this works with different resolution Android Screens as in my case the Splash Screen is not same in all devices (either enlarged or bulged)

jsulm

@Pradeep-P-N From the link:
"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."

Pradeep P N

Hi @jsulm ,
Thank you, i found an other way and was able to solve it :)
cool :)
Thanks again for the support.

aha_1980

@Pradeep-P-N

wanne share your solution?