Getting started with PhoneGap for Android

First of all a short description of what’s phonegap:
PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these.
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.

During this blog I’ll be showing mostly the main things you should be knowing when you start working with PhoneGap.
So what I’ll be talking about will be:

• Importing some of the libraries that you will need…
• How to make your application go Full Screen in Phonegap
• How to add a Splash Screen and give it a (delay time)
• How to create a basic menu with quit and reload function.
• How to change the application icon instead of the default android one.
• Where to put some specific lines for the code to work properly.
• Make app compatible with older versions of Android.

OK, first of all you have to set up your environment for android developement as you have to follow the guide provided from phonegap here.

Reminding that:
1. When you have to add the line “import org.apache.cordova.*;” in the main Activity.java file as shown on the guide, please coment out the “impor android.app.Activity;” because it isnt mentioned on the guide but we don need that for the helloworld thing showed there.
2. And the Support orientation changes, when pasting the line (android:configChanges=”orientation|keyboardHidden|screenSize”) inside the <activity> tag, make sure you paste it right under the android:label (in the middle of the android:label and android:name) because if you put that after android:name then when the screen rotates the app will crash.

— How to make your application go Full Screen in Phonegap ?

All you have to do is to edit your Activity.java file and do the steps below:
1. Add “import android.view.WindowManager;”
2. Add the code below, after “super.onCreate(savedInstanceState);” in the middle of that << and super.loadUrl

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
 WindowManager.LayoutParams.FLAG_FULLSCREEN | 
 WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

— How to add a splash screen ?

Create the image you want to use as a splash screen, name it splash.png and put it under /res/drawable-hdpi
Add the line below right under the lines on the previews step.

super.setIntegerProperty("splashscreen", R.drawable.splash);

and then edit: super.loadUrl(“file:///android_asset/www/index.html”);
to this: super.loadUrl(“file:///android_asset/www/index.html”, 3000);
in order to edit the milliseconds of the splashscreen.

— Creating a basic menu with basic functions like Reload and Quit.

Again, edit Activity.java file.
1. Add:

import android.view.Menu;
import android.view.MenuItem;

2. Add the code below after the first public void onCreate

// Declaring the Menu options
 @Override
 public boolean onCreateOptionsMenu(Menu menu)
 {
 super.onCreateOptionsMenu(menu);
 int base = Menu.FIRST;
 // Group, item id, order, title
 menu.add(base,base,base,"Quit");
 menu.add(base,base,base,"Reload");
 return true;
 }
//handle menu item selection
 public boolean onOptionsItemSelected(MenuItem item)
 {
 if (item.hasSubMenu() == false)
 {
 if("Quit"==item.getTitle()) {
 finish();
 }
 if("Reload"==item.getTitle()) {
 super.loadUrl("file:///android_asset/www/index.html");
 }
 }
 return true;
 }

So here is how the final Activity.java file looks like: http://pastebin.com/WnDMFM03

— How to change the applications icons.

I think that the easiest step could be just to replace the existing ones, even though there are other ways.

Just create your icon and make it at the right size and put it at the specific folders inside the project:
The folders are under /res and then u have /drawable-hdpi /drawable-ldpi etc

Just use the following dimensions:

(Low density screen) (120 dpi) ldpi >> 36 x 36 px
(Medium density screen) (160 dpi) mdpi >> 48 x 48 px
(High density screen) (240 dpi) hdpi >> 72 x 72 px
(Extra-high density screen) (320 dpi) xhdpi >> 96 x 96 px

Reference: http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html

— How to make the app compatible with older versions of Android

Make sure you have those package versions installed from the Android SDK Manager.
And all you have to do is to edit the <use-sdk> line in AndroidManifest.xml

from: <uses-sdk android:minSdkVersion=”15″ />
to: <uses-sdk android:minSdkVersion=”8″ /> (it can be 10 or lower)

and as we are in AndroidManifest.xml
edit: android:versionName=”1.0″ to change your app version number. (exc use 1.0.0 instead)