Installing a 9-Patch Splash Screen for Android using draw9patch and PhoneGap

Cordova includes a Splashscreen API so you can add a splash screen to your app, which consists of a still graphic image displaying before your app starts.

If you create your Android splash screen as a 9-patch image, then the image will resize proportionally when displayed in either portrait or landscape mode.

Helpful links:
3.4.0: https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md
http://developer.android.com/tools/help/draw9patch.html

1. Create png images of your splash screen in these sizes. All should have the filename of splash.png and be placed in the following folders in Eclipse:

xlarge (xhdpi): at least 720 x 960 (Cordova used 720 x 1280)
large (hdpi): at least 480 x 640 (Cordova used 480 x 800)
medium (mdpi): at least 320 x 470 (Cordova used 320 x 480)
small (ldpi): at least 200 x 320 (Cordova used 200 x 320)

For best effect (in my opinion) use your 512 x 512px app store image and fit it in the center (or slightly above center) of each of the above sizes. Fill the space around it with a design-appropriate solid color. 

I created a 720 x 1280 image in Photoshop, then cropped it to the other sizes proportionally, saving each to the correct size and reducing the center image appropriately. Copy the files into the res/drawable folders already existing in Eclipse, matching the image size to each folder as noted above in step 1. Again, all these images should be called splash.png

Creating a 9-Patch Image

2. Now go ahead and open each one and put a 5px solid border or stroke around each, and save over the old file — IF  you are converting existing splash screens to 9-patch. Otherwise, you would do this all in step 1 when first creating your splashes. When we are finished with this tutorial, that border color will fill the space to the left/right or top/bottom of the image, leaving the inner areas in the correct proportions. So choose a border color that fits in with the color scheme. Leave a window open on your desktop so we can drag the files to the 9-patch tool.

2. Double-click on the draw9patch.bat file found in your adt-bundle-windows/sdk/tools folder, or android-sdk-mac_x86/tools folder. (Mine was in my /Program Files folder on my PC. This opens up the Java program. If you have a slow system, it will take a while to open. (Android Studio has this tool as part of the environment. Put the png in your project and double-click to open it in the 9-Patch tool.) OR, you can simply type draw9patch in your Terminal app and it will open.

3. Drag your smallest png onto the application window. The application interface changes. In the right pane, scroll up and down to see what your image looks like in three different configurations. (If your image is huge, like 720 x 1280, you may not see them at right.)

4. Slide the scrollbars in the left pane so you see the upper right corner of the image. You should see a white/gray checkerboard line around the image. That is your one-pixel drawing area.

The top and left side lines you draw will define the design areas that are flexible, that will stretch/squash with the screen size. The right and bottom lines will define the static areas of the design that doesn’t change. In my case, the design is composed of a square icon in the middle with plain space around it. So a line you draw at top or bottom will define a vertical path of that width that extends down the entire screen. A line you draw at left or right will define a horizontal path of that width that extends across the entire screen.

a. So my top will be composed of a 5px line going from upper left corner to 5px right, and a 5px line going from upper right corner to 5px left. (This 5px is based on the solid color I put around the image in step 2.)

b. My left side will be composed of a 5px line going from upper left corner to down, and a 5px line going from lower left corner to top. Following step a and b means that only the 5px border all around will stretch and squash.

c. My right side will be composed of a vertical line that is in line with the vertical height of the icon design, and lined up with it in the middle of the right side, opposite the design. (The vertical line’s top will line up with the top of the icon design.)

d. My bottom side will be composed of a line that is the horizontal width of the icon design, and lined up with it. Following steps c and d will define the area that is static, and the lines should not overlap the lines at top or left.

Place the cursor in the extreme edges and draw the lines. (You won’t draw anything in the corner itself.) Draw too fast with an unsteady hand and you’ll create gaps in the line; we don’t want that. If you draw too far, you can hold down the Shift key and retrace to erase. Make sure you don’t leave any gaps.

5. Do this for all four sides.

6. Scroll up and down in the right pane to see your work in the three configurations. The center should stay the same while the area around it stretches and squashes.

7. Click on File > Save 9-patch and save as splash.png. “.9” will be appended to your filename (to become splash.9.png). Click on File > Open to work on the next splash.png. Click on File > Quit to exit the program.

8. In Eclipse, delete all the splash.png files and retain the splash.9.png versions. Add each of the splash screens to your project’s platforms/android/res/drawable folders.

Splashscreen API

1. In console, grab the splashscreen API, starting from within your project’s folder:

cordova plugin add org.apache.cordova.splashscreen

2. In config.xml:

<preference name="splashscreen" value="splash" /> <!-- Assumes your splash images in /myApp/res/drawable/ are named "splash.png" -->
<feature name="SplashScreen">
 <param name="android-package" value="org.apache.cordova.SplashScreen" />
</feature>

In index.html, set the hide() to stop the splashscreen when the program starts:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <script type="text/javascript" charset="utf-8">

 // Wait for device API libraries to load
 //
 document.addEventListener("deviceready", onDeviceReady, false);

 // device APIs are available
 //
 function onDeviceReady() {
 // Now safe to use device APIs
 navigator.splashscreen.hide();
 }
</script>