Worklight Android Splash

Question

Note: in Worklight 6.2 it is much easier to control the native/web relationship, so this question is now obsolete.

Worklight Studio 5.0.6, Android emulator 4.0.2

Questions about splash screens in Android. The code below was derived from the answer to this question It seems to work just fine. My first concern is the hard-coded delay

 super.loadUrl(getWebMainFilePath(), 10000);

If the 10000 (10 sec) delay is omitted then we see a blank screen between the native splash screen and the first Web page. My guess is that depending on the CPU speed of the device that 10 seconds could be adjusted downwards, or on a slow device might need to be increased. So I wondered if there was a different callback we could use rather than depending on a hard coded 10 seconds.

Second, suppose I wanted some less static initial screen, is it sufficient to add code as per this article before calling super.loadUr()? I'm familiar with the material about calling native pages from JavaScript, but here we'd be starting off in a native page and at some point wanting to pass control to the JavaScript world, which has not been previously initialised.

import android.os.Bundle;
import com.worklight.androidgap.WLDroidGap;

public class App02 extends WLDroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState){

          super.onCreate(savedInstanceState);
          super.setIntegerProperty("splashscreen", R.drawable.splash);
                  // active code here??
          super.bindBrowser(appView);
    }

    /**
     * onWLInitCompleted is called when the Worklight runtime framework initialization is complete
     */
    @Override
    public void onWLInitCompleted(Bundle savedInstanceState){
        super.loadUrl(getWebMainFilePath(), 10000);
    }
}

Answer 1

You could do that.

1). Add this code to your main Android class java class:

/*
 * Shows the splash screen over the full Activity
 */
protected void showSplashScreen() {
    mThisapp.runOnUiThread(new Runnable() {
        public void run() {
            // Get reference to display
            final Display display = getWindowManager().getDefaultDisplay();

            // Get current orientation
            final int rotation = display.getRotation();
            final String orientation;
            switch (rotation) {
            default:
            case Surface.ROTATION_0:
                orientation = "Portrait";
                break;
            case Surface.ROTATION_90:
                orientation = "Landscape";
                break;
            case Surface.ROTATION_180:
                orientation = "Reverse Portrait";
                break;
            case Surface.ROTATION_270:
                orientation = "Reverse Landscape";
                break;
            }
            Log.i(TAG, "Orientation :: " + orientation);

            // Create the layout for the dialog
            final LinearLayout root = new LinearLayout(mThisapp.getActivity());
            // This method was deprecated in API level 13: display.getHeight and display.getWidth
            // Gets the size of the display, in pixels
            final Point outSize = new Point();
            display.getSize(outSize);
            root.setMinimumHeight(outSize.y);
            root.setMinimumWidth(outSize.x);
            root.setOrientation(LinearLayout.VERTICAL);
            root.setBackgroundColor(mThisapp.getIntegerProperty("backgroundColor",
                    Color.WHITE));
            root.setLayoutParams(new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT, 0.0F));
            //root.setBackgroundResource(mThisapp.splashscreen);

            // ImageView Setup
            final ImageView imageView = new ImageView(mBaseContext);
            // Setting image resource
            imageView.setImageResource(mThisapp.splashscreen);
            // Setting image position
            imageView.setLayoutParams(new LayoutParams(
                    LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            root.addView(imageView);

            // Create and show the dialog
            splashDialog = new Dialog(mThisapp,
                    android.R.style.Theme_Translucent_NoTitleBar);
            // Check to see if the splash screen should be full screen
            if ((getWindow().getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN) == WindowManager.LayoutParams.FLAG_FULLSCREEN) {
                splashDialog.getWindow().setFlags(
                        WindowManager.LayoutParams.FLAG_FULLSCREEN,
                        WindowManager.LayoutParams.FLAG_FULLSCREEN);
            }
            splashDialog.setContentView(root);
            splashDialog.setCancelable(false);
            splashDialog.show();
        }
    });
}

2). In public void onCreate(final Bundle savedInstanceState), add lines:

super.onCreate(savedInstanceState);
    mThisapp = this;
    mBaseContext = getBaseContext();
    // Add splash screen
    super.setIntegerProperty("splashscreen", R.drawable.splash);
...
    // Show the splash dialog
    this.splashscreen = this.getIntegerProperty("splashscreen", 0);
    showSplashScreen();
    // End of apache/cordova-android/DroidGap
...
}

Yes, you have to have a splash image (in .png) in res folder.

3). Modify onMessage

@Override
/**
 * Called when a message is sent to plugin.
 *
 * @param id            The message id
 * @param data          The message data
 * @return              Object or null
 */
public Object onMessage(final String id, final Object data) {
    Log.d(TAG, "onMessage(" + id + "," + data + ")");
    if ("splashscreen".equals(id)) {
        if (data != null && "hide".equals(data.toString())) {
            if (mThisapp.appView.getVisibility() != View.VISIBLE) {
                mThisapp.runOnUiThread(new Runnable() {
                    public void run() {
                        final Animation animationIn = AnimationUtils
                                .loadAnimation(mBaseContext, R.anim.zoom_in);                           animationIn.setAnimationListener(new Animation.AnimationListener() {
                            @Override
                            public void onAnimationEnd(
                                    final Animation animation) {
                            }

                            @Override
                            public void onAnimationRepeat(
                                    final Animation animation) {
                            }

                            @Override
                            public void onAnimationStart(
                                    final Animation animation) {
                                if (splashDialog != null)
                                    mThisapp.removeSplashScreen();
                            }
                        });
                        mThisapp.appView.setVisibility(View.VISIBLE);
                        mThisapp.appView.requestFocus();
                        mThisapp.appView.startAnimation(animationIn);
                    }
                });
            } else {
                this.removeSplashScreen();
            }
        }
        return null;
    } else if ("spinner".equals(id)) {
        if (data != null && "stop".equals(data.toString())) {
            this.spinnerStop();
            return null;
        }
    }
    return super.onMessage(id, data);
}

4). Verify config.xnl has this line

< plugin name="SplashScreen" value="org.apache.cordova.SplashScreen" />

5). In your Worklight initialize finish block, add this like:

if (navigator && navigator.splashscreen)
            navigator.splashscreen.hide();

Then you have a full splash screen with backend loading. When ready, show first screen.