Splash Screen For Your Android Applications

By
Georgi Atanasov
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>
 
    <!-- Application theme. -->
    <style name="SplashTheme" parent="AppBaseTheme">
        <!-- Disable window features like ActionBar, Title and Overlay. -->
        <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">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </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:

Splash_Screen

 

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

Share this article

Comments


Comments are disabled in preview mode.

Stay connected with NativeScript

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© 2016 Progress Software Corporation. All Rights Reserved.