einicher.net

The code must do the talking

Real Android splash screen with Cordova

8. February 2021

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.

Leave a Reply

Your email address will not be published. Required fields are marked *