Real Android splash screen with Cordova
Cordova offers a splash screen plugin that initializes the splashscreen way too late on Android: as long as the webview is not loaded, you just see an empty window. Looks pretty lame.
I realized that NativeScript did not seem to have that problem and found this blog entry explaining why. I adopted this solution for cordova – its a bit tricky there, because you have to change three files inside the platform/android folder (which means you have to redo this every time you remove and add android platform).
Cordova does not seem to make use of Androids xml styles. This solution works with a simple trick: you create two Andoid xml styles, assign it to your main activity then switch the style in the main activitys onCreate
event. The first style has a background image, the second does not.
Create styles.xml
In your project, after you added android platform create file platform/android/app/src/main/res/values/styles.xml
with following content:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="SplashTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
<item name="android:windowBackground">@drawable/splashscreen</item>
</style>
<style name="AppTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
</style>
</resources>
Change AndroidManifest.xml
Go to platforms/android/app/src/main/AndroidManifest.xml
and search for the <activity
tag, it should have an attribute called android:theme
– change it to android:theme="@style/SplashTheme"
Change CordovaActivity.java
To make Android change back to normal Theme from SpashTheme, we have to add one line of Code inside the onCreate
function inside platforms/android/CordovaLib/src/org/apache/cordova/CordovaActivity.java
Look for the line super.onCreate(savedInstanceState);
And prepend following line:setTheme(getResources().getIdentifier("AppTheme", "style", getPackageName()));
It is important you add it before super.onCreate(savedInstanceState);
since you cannot change the theme after super.onCreate(savedInstanceState);
Add Splashscreen Image(s)
Add Splashscreens to platform/android/app/src/main/res/drawable-*
folders. File name is always splashscreen.png
. If you do not want to create all splashscreens in all sizes, there is a trick:
You can have one png image for all sizes, just leave a one pixel transparent border and mark parts that can be stretched with black pixels like this:
Create folder platform/android/app/src/main/res
/drawable-nodpi and put your file in there with the name splashscreen.9.png
The number nine before the png is important: it makes Android understand that it is supposed to take this picture for all sizes and fill up the rest of the background with the color between the two black pixels. This is called a “Nine-Patch” file or drawable. Hard to explain, hard to understand, but very handy.
So what have we actualy done here? We have created two Android-XML-Styles named SplashTheme
and AppTheme
. SplashTheme
has a android:windowBackground
pointing to the drawable
folders looking for a file named splashscreen
. We change the android:theme
Attribute from our activity in AndroidManifest.xml
to the SplashTheme
. AndroidManifest is loaded from the beginning, so our App is starting under the impressionat that SplashTheme is our main theme. Our splashscreen gets displayed instantly, until CordovaActivity
is loaded and its onCreate
function ist triggered. There we change our Theme to AppTheme
, which has no windowBackground
and so our splash screen disappears and cordova web view is loaded. Of course there you now would have to make a html/javascript splash screen until all your web app is loaded – which is what the actual cordova-splash-plugin does. Its just a bit late for the party.