by

Customizing Launch Icon On Eclipse/PhoneGap Application

OK, here’s another quick tip.  If you’re ready to replace the default icon on your Android application in Eclipse, it’s just a matter of placing your icon images in the “/res” folder.  By default, an icon named “ic_launcher.png” is used, so you can just replace those files with ones of your own creation and voila!  If you want to preserve those default icons and add your own, just place them side by side with “ic_launcher.png“.  A few considerations:

  • You’ll need a set of 4 icons at different resolutions in the format PNG.  They all should have the same name (you’ll see why in a minute).  I created my icon images at the following sizes: 36 x 36 pixels, 48 x 48 pixels, 72 x 72 pixels, and 96 x 96 pixels.  This corresponds to the four sizes supported by Android: Low DPI (ldpi), medium DPI (mdpi), high DPI (hdpi), and extra-high DPI (xhdpi).
  • Once you have your icon files ready, copy them to the project’s folder “/res/drawable-xxxx“, where “xxxx” is the resolution of the icon file (i.e. ldpi, mdpi, hdpi, or xhdpi).  See figure 1.- Figure 1 –
  • Optional: If you chose to use a different name from the default, like I did, you’ll have to change the icon configuration in your “AndroidManifest.xml” file.  Just double click the file and locate the line that reads “android:icon=@drawable/ic_launcher” and change it to “android:icon=@drawable/xxxx“, where “xxxx” is the name of your icon file without the extension (see figure 2).  Note: you can also do this in the Application tab available in the editor when you double click your file (see figure 3).- Figure 2 –

    – Figure 3 –

And that’s it! Hope this helps.

by

Adding A Splash Screen to Your PhoneGap App

First, I have to say that the reason I think it’s worth writing about this is because it took quite a bit of research to finally find information on how to do this.  So, if you happen to stumble upon this blog, hopefully this will help you.

Overview

To add a splash screen to your app, you need to do a few things:

  • The image: obviously, you have to have an image to use for a splash screen and to place it in the /res folder of your project.
  • The Java: Modify your main java file to specify loading a splash screen for x number of milliseconds
  • The Unload: Optionally, modify your index.html file to unload the splash screen once the device is ready.

Details

The Image

My splash image is at “res/drawable-hdpi/splash.png” and apparently it must be all lowercase.  I haven’t tried the other resolutions or other image formats than PNG.   To test, I created mine as a PNG with dimensions of 320 x 480 pixels and it seems to work for phone displays.  I’ll update this once I test the other resolutions/formats.  Or, you can update me if you figure it out sooner.

The Java Modification

This goes in the main “.java” file of the application located in the “src” folder (e.g. “src/your/application/domain/splashscreentest.java“.  The function to modify is the onCreate().  Mine looks like this (lines 2 and 3 inside the function is where the changes take place):

@Override
public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     super.setIntegerProperty(“splashscreen”, R.drawable.splash);
     super.loadUrl(“file:///android_asset/www/index.html”, 30000);
}

Code dissection

  • Line 2: This is setting a property specified in the first parameter (i.e. “splashscreen”).  The second parameter tells it where to pull the image from  (i.e. R.drawable.splash = res/drawable-anydpi/splash.png … anydpi refers to the different folders used to store the splash screen).
  • Line 3: Loads the index.html file as it normally would, but only after the number of milliseconds specified in the second parameter.       In my example above, I’ve set to 30 seconds.  Yes, it’s overkill, but I wanted to avoid the issues with the emulator being so slow that the splash screen would not be up long enough to load the app.

Keep in mind that unless specified otherwise, the splash screen will remain loaded until the entire time period has elapsed.  See next section for solution.

The Unload of the Splash Screen

In newer versions of PhoneGap (I believe 1.8.0 and up), index.html loads on a separate thread, so there’s the possibility that the app is ready to go, but is prevented by the splash screen to do so.  To fix this, add a line to the top of the onDeviceReady() function in index.html to unload the splash screen and show index.html:

function onDeviceReady() {
     // alert(“Application Loaded”);
     navigator.splashscreen.hide();

     …
     …
     …
}

And that’s all.  At this point, your app should be displaying a splash screen!

by

Why PhoneGap, or Cordova, or Whatever You Call It

So, why use Cordova/PhoneGap? In all honesty, it lured me with its promises of cross-platform, write-once-deploy-anywhere capabilities.

The basic concept with PhoneGap is that it provides a container for an HTML5/JavaScript application to run in.  All native calls to the device are abstracted by the PhoneGap API, which you call directly using JavaScript.  The idea is that your application calls them same API in the same way no matter what device it’s running on, which entails PhoneGap presenting a consistent API to your application and taking care of the lower level calls to the device.  You would essentially make the same call to, say, take a picture, and PhoneGap would deal with the specifics of how that’s implemented on the device it’s running.

Another reason it was appealing to me was the fact that my code would be in HTML5 and JavaScript.  No platform native code!

As you can see, that reason alone is very compelling.  I don’t have enough experience yet in this brave new world to really say whether PhoneGap delivers, but I sure as hell hope so.

by

My Setup

Before I start talking too much and documenting my travels, I decided to mention what setup I’m currently running, which, as it turns out, is very important when you’re asking for information.  This is mainly due to the rapid pace of development of all the components involved.  I have the following:

  • OS: Windows 7.  Not much to say about this one.
  • IDE: Eclipse Classic / Version: 4.2.0 64-bit (http://www.eclipse.org/downloads/).  The first thing I noticed about this IDE is that it seems pretty slow, clunkyish.  The thing works, though.  I have to say that coming from a Visual Studio environment, Eclipse is awkward at best when you first touch it.  I’ve read of some people who find it downright repulsive.
  • Framework: Cordova 2.0 / PhoneGap.  In case you didn’t already know, this was previously known as PhoneGap, but Adobe Systems owns that name now. http://www.phonegap.com/download
  • Plugin: MDS AppLaud.  This is a plugin for Eclipse which gives you:
  • Plugin: ADT Plugin (Android Development Tools) version 20.0.2.  This is a plugin for eclipse that gives you the capability to quickly set up and Android project. http://developer.android.com/tools/sdk/eclipse-adt.html
  • jQuery Mobile version 1.1.1.  Simplifies a LOT of the JavaScript development and gives you some pretty nifty UI elements and animations by making use of a comprehensive JavaScript library and HTML5 tags.  This is not your typical drag and drop thing you may be used to, but with little effort I was able to create clean-looking UI’s for my test applications.  Worth it.  Get it.  http://jquerymobile.com/
by

Hello World!

After spending a couple of days setting up my development environment with Eclipse, PhoneGap (Cordova 2.0), and jQuery Mobile, I tackled my first application: “Hello World!”

Granted, I can only work on this for 1 or 2 hours at a time since this is my after-work self-improvement studies.  Still, I thought, a simple “Hello World!” shouldn’t take more than 1 hour, right? Wrong! I think one of the biggest contributors to the learning curve for me was learning a whole new world of terminology, including esoteric acronyms like:

AVD

It took me quite a while to even get to the point where I could deploy my app to AVD.  In fact, it even took me a while to figure out what AVD meant! What the heck is the AVD? Oh, yes, it’s the Android Virtual Device, in other words, this is the emulator in which you can run your applications for testing purposes … as long as you’re willing to wait and wait and wait for the AVD to launch.

JAR

If you’ve never played around with Java, the JAR is simply a thing you use to store things in, such as cookies, pickles, candy, etc.  Well, in Java it’s a bit similar, JAR (Java ARchive) files contain things like classes or executables that can be used by the Java run-time and so on http://en.wikipedia.org/wiki/JAR_(file_format)

ADT

ADT Plugin.  This is the Android Development Tools plugin for eclipse.  It makes your life easier … supposedly.

I’ll add more acronyms as they pop into my head.

by

Traveling through the Gap

The title is in reference to mobile application development using the PhoneGap framework (Cordova 2.0 is my starting point).  I started this learning experience about a week ago.  Sometimes the gap narrows to painful widths, sometimes it opens up and I see the light.  It’s been quite a ride, especially since I haven’t really been able to find comprehensive documentation.  I attribute that to two things: the framework is moving forward at breakneck speed and the project is very community driven and apparently not very organized in terms of disseminating the information.  All in all, it appears to be very promising and to have great potential, even if things are a bit of a mystery to me still.

I’ll try to keep this blog updated with issues I find and how I resolve them.