A common user experience for an application is to display a loading (splash) screen while it is initializing. Building our Telerik Next conference application, we wanted to display such a screen. While trivial for iOS, it turned there is no built-in mechanism in Android for achieving this functionality.

Update: (10/19/2016)
Since this post was initially written, there have emerged official ways to handle this. We provide documentation on creating launch screens with Android and also creating launch screens with iOS. A launch screen is shipped with the official NativeScript app template. On iOS apps, a splash screen is mandatory for App Store approval.

So, I asked the web (thanks, Google!) what our options are and it turned the most common approach is to display an additional Activity, showing the image, and then to proceed with the main Activity. This is a viable approach and my initial attempt was to utilize it, but I soon realized it is not appropriate in the context of a NativeScript application. Since we initialize the V8 engine and process all the JavaScript on the UI thread (bear in mind the overridden in JavaScript onCreate method of the main Activity), opening a new Activity would not donate to the required result.

After searching for other options, without any success, I decided to take a closer look to the drawing lifecycle and visual graph in Android. What caught my attention was the setBackgroundDrawableResource(int resId) method of the main Activity’s Window. So, instead of opening a new Activity to display an image, I decided to go after changing the Window’s background as appropriate. After some trial-error experiments, I finally came with a solution, which you may find useful for your applications.

The Solution

It is pretty simple – create a new Android theme to apply to the main Activity initially and later, in the onCreate method, change the theme to the default one. This is a generic solution and it will work for pure Android applications as well. The next steps describe how to implement the approach within a NativeScript CLI project (the default CLI project template for Android installs a splash screen image located in the <your-app>/App_Resources/Android/drawable-nodpi folder):

1. Go to `<your-app>/App_Resources/Android` directory and add `values/styles.xml` there:

<resources>

<!--

Base application theme, dependent on API level. This theme is replaced

by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

-->

<style name="AppBaseTheme" parent="android:Theme.Light">

<!--

Theme customizations available in newer API levels can go in

res/values-vXX/styles.xml, while customizations related to

backward-compatibility can go here.

-->

</style>

<style name="SplashTheme" parent="AppBaseTheme">

<item name="android:windowActionBar">false</item>

<item name="android:windowNoTitle">true</item>

<item name="android:windowContentOverlay">@null</item>

<item name="android:windowBackground">@drawable/splashscreen</item>

</style>

<style name="AppTheme" parent="AppBaseTheme">

</style>

</resources>

2. Edit the AndroidManifest.xml file in the <your-app>/platforms/android directory and set the following theme to the main Activity:

<activity

android:name="com.tns.NativeScriptActivity"

android:label="TestApp"

android:theme="@style/SplashTheme">

Note: Generally, you should not modify the content of the platforms folder as it is implicitly updated upon the `platform add <Platform>` command. The suggested approach is to add your extended version of the AndroidManifest.xml file in the <your-app>/App_Resources/Android/ folder. Since this functionality is still not available (we are working on it), for the sake of this blog, we are editing the manifest file in the platforms/android folder.

3. Add the following code to your application’s main file (e.g. app.js) to remove the splash image once it is no longer needed:

var application = require("application");

// check the current platform (we are interested in android only)

// alternatively, you may have app.android.js and app.ios.js

var platform = require("platform");

if(platform.device.os === platform.platformNames.android) {

application.onLaunch = function(intent) {

// hook the onActivityCreated callback upon application launching

application.android.onActivityCreated = function(activity) {

// apply the default theme once the Activity is created

var id = activity.getResources().getIdentifier("AppTheme", "style", activity.getPackageName());

activity.setTheme(id);

}

4. Run the application. You should see the splash image while the NativeScript Runtime is loading:

Well, pretty much that's it - happy splash-screening with NativeScript and Android :)

Splash Screen For Your Android Applications

Update: (10/19/2016)

The Solution

1. Go to `<your-app>/App_Resources/Android` directory and add `values/styles.xml` there:

2. Edit the AndroidManifest.xml file in the <your-app>/platforms/android directory and set the following theme to the main Activity:

3. Add the following code to your application’s main file (e.g. app.js) to remove the splash image once it is no longer needed:

4. Run the application. You should see the splash image while the NativeScript Runtime is loading: