As the screencast shows we show a native splash with fade and translate animation on an imageview. After the animation ends we show the real splash screen, which is a static image that looks like the native splash view when the animation completes. Then, we show the main page of the Cordova application (the notification dialog that pops up indicates that cordova is ready). Now that we cleared the tricky part we move on the native code and show how we create the animations and later call Cordova.

package gr.your.pacjage;


import gr.your.package.R;

import android.os.Bundle;

import org.apache.cordova.*;

import android.view.View;

import android.graphics.PixelFormat;

import android.view.Window;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.RelativeLayout;


public class CordovaApp extends CordovaActivity

{

    public void onAttachedToWindow() {

            super.onAttachedToWindow();

            Window window = getWindow();

            window.setFormat(PixelFormat.RGBA_8888);

        }


    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        AnimateNative();

        //loadUrl(launchUrl);

    }


    private void AnimateNative() {

        Animation anim = AnimationUtils.loadAnimation(this, R.anim.fade);

        anim.reset();

        RelativeLayout l=(RelativeLayout) findViewById(R.id.splashLay);

        l.clearAnimation();

        l.startAnimation(anim);


        anim = AnimationUtils.loadAnimation(this, R.anim.translate);

        anim.reset();

        ImageView iv = (ImageView) findViewById(R.id.logo);

        iv.clearAnimation();

        iv.startAnimation(anim);

        anim.setFillAfter(true);

        anim.setAnimationListener(new Animation.AnimationListener(){

            @Override

            public void onAnimationStart(Animation arg0) {}          

            @Override

            public void onAnimationRepeat(Animation arg0) {}

            @Override

            public void onAnimationEnd(Animation arg0) {

                loadUrl(launchUrl);

            }

        });


    }

}



The code above shows how the Cordova Activity should be in order to call the native view first and later load Cordova. As we can see we call “loadURL” onAnimationEnd event. That way when the native view completes our Cordova app shows up.


As I said in the beginning comments and suggestions are welcome. With that approach you can have a working native splash with any animations you want.

 

By Jc