Manage the splash screen in an Android-based hybrid application

Manage the splash screen in an Android-based hybrid application

Choose how to manage the splash screen for Android during application initialization.

Java APIs for showing and hiding the splash screen

In Java, we can use the methods WL.getInstance().showSplashScreen(Activity activity) and WL.getInstance().hideSplashScreen() to show and hide the splash screen from native code.

Change the default splash image

We can change the default splash image located in the res/drawable folder and is named splash.png.

Disable the splash screen in Android

For Android, we can disable the splash screen either by:

Edit the Native Android Appclass and removing or commenting out the WL.getInstance().showSplashScreen(this) API call

Delete the splash.png file in the res/drawable folder.

Cordova splash screen API

If we use the splash screen API offered in Cordova, do not use the MobileFirst splash screen APIs at the same time.

Showing a custom image

We can show a custom image when we use Cordova splash screen APIs by storing the image in the res/drawable folder and then either:
Declaring it in the config.xml file.
<preference name="SplashScreen" value="splash_for_cordova_activity" />
<preference name="SplashScreenDelay" value="60000" />
Add it programmatically in the CordovaActivity class.
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
//Add these two lines to enable the Cordova splash screen     this.splashscreen = R.drawable.splash_for_cordova_activity;
    this.showSplashScreen(60000);
    this.loadUrl(WL.getMainHtmlFilePath());
}
When the web view is ready to be shown, we can hide the splash screen using:
navigator.splashscreen.hide();

Showing a custom splash screen by adding a custom activity
We can implement a custom splash screen by adding a custom activity to be used as a splash screen. Here is an example of code where you to declare an activity in AndroidManifest.xml.
The activity must have an intent-filter with MAIN and LAUNCHER properties that are defined in order to be launched.
 <activity
       android:name="com.MyApp.MySplashScreen"
       android:label="@string/app_name"
       android:screenOrientation="portrait"
       android:theme="@android:style/Theme.Black.NoTitleBar" >
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
In the activity onCreate() method, after you show the custom UI, we can use the WL.createInstance().initializeWebFramework() API to initialize IBM MobileFirst Platform Foundation. Once initialization is complete, we can hide the custom splash screen activity or move to a different CordovaActivity in order to show the application's web view.

Showing a custom loading spinner

We can enable a Cordova loading spinner by declaring it in the custom.xml file.
<preference name="LoadingDialog" value="Please wait while the application loads."/>

We can also set the Cordova Activity background color to transparent instead of the default black by declaring it in the config.xml file.
<preference name="BackgroundColor" value="0"/>

By default, the MobileFirst JavaScript library auto-hides the splash screen when the application is launched. To have a smooth transition from the splash screen to the web view, set the option autoHideSplash to false in the initOptions.js file and use the WL.App.hideSplashScreen() method to hide the splash screen after all of the page initialization tasks (including loading other JavaScript frameworks) are completed.
Make sure that the application initialization flow does not block the JavaScript call to hide the splash screen. For example, a problem can occur when you set the application to connect to the server on application startup, and you define form-based authentication that waits for the user to enter login credentials. In this case, the application shows a web login form behind the splash screen without a way for the user to interact with it.

Parent topic: Manage the splash screen