Creating a Simple Android Splash Screen with PhoneGap & Sencha Touch

Dealing with the multitude of Android devices (and therefore different screen sizes) can sometimes be a pain, especially when dealing with the scaling of splash screens. In addition the default nature of Android splash screens is to hide themselves once webview page loads. This is not ideal for large applications as you will always have a bit of time between when the splash screen hides and before the page fully loads. Luckily there is a simple solution for this, requiring minimal work to implement.

Please note, this process assumes you are using the latest version of PhoneGap (2.4 at the time of writing) and a recent version of Sencha Touch. This solution can easily be implemented with web-based mobile frameworks other than Sencha Touch.

1) Create the Splash Screen
The first step is to create a splash screen that frees us from worrying about scaling. We can achieve this by creating a splash screen with a centered image and solid background. You will want to create an xml file in res/drawable, and name it splash.xml. Add the following to this file:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#FF000000" />
        </shape>
    </item>
    <item>
         <bitmap 
             android:src="@drawable/splashicon"
             android:gravity="center" />
    </item>
</layer-list>
			

This will essentially give you a solid background with a centered image. Simply change the value for android:color to whatever hex color you want. As you can see there is a reference to @drawable/splashicon. This is the name (minus extension) of the image you want centered on the splash screen.

2) Create/Import the Images
Next you will need to create the image that will be centered on the splash screen. Since this is not a scaling image we need to make sure it is not larger than the device screen. Good size are 2-3 times the dimensions of the launcher images. Make sure to include an image of the same filename (splashicon.png), yet different sizes, in each of the four drawable-dpi folders - just like you would with the launcher icon.

3) Update onCreate in your Main Activity
Open up the java file for your MainActivity that extends DroidGap. You will want to add a new line as shown below, and also tweak your loadUrl call, as shown below:

public void onCreate(Bundle savedInstanceState) {
    // Add the below line to include the splash screen		
    super.setIntegerProperty("splashscreen", R.drawable.splash);   	
    super.onCreate(savedInstanceState);
    // Add a second parameter. This is how long the splash screen will be displayed for. 
    // Make sure this is significantly longer than it will take for your app to load.     
    super.loadUrl("file:///android_asset/www/index.html",10000);   
}				
			

4) Hide the Splash Screen on App Launch
Now that we have everything set up, the last part is to add code to your Sencha Touch application to remove the splash screen. The best place to do this is right in the launch function of your application, after you create your main view. To maximize user experience though we should wrap this in a delayed function to give the main view time to render.

launch: function() {
    Ext.create('Myapp.view.MainView');
    // Wait 1 second for the main view to render
    Ext.Function.createDelayed(function(){
        // Remove the splash screen
        navigator.splashscreen.hide();		
    },1000,this)();    
}		
			

Using this method you will find the transition from app open to app launch is very clean and orientation changes are handled nicely. In addition, the same Javascript code (although with a different implementation on the native side) can be used for iOS apps as well. If you aren't using Sencha Touch, just make sure navigator.splashscreen.hide() is not called until PhoneGap fires the deviceready event.