Thursday, December 12, 2013

PhoneGap/Cordova Android Application setup on eclipse.

Here we are going to discuss about the development environment for Cordova (also known as PhoneGap) and to execute sample application. Here one thing i need to be clear that cordova provides a base to make installer files which can be install on IOS, Android, Windows Phone & many others. Only it provides us the access to the device features using HTML5.

What we need:

  1. Eclipse IDE with ADT & Android SDK Installed. check Here.
  2. Get the latest Copy of Cordova/Phonegap. Extract it & using command line go inside cordova-android\framework & make a jar build using ant jar. This will generate cordova-x.x.x.jar. 
Setup New Project:
Now Launch Eclipse navigate to File => New => Android Application Project


Now specify Application & Project name


Now make sure the checkbox for Mark this project as a library is unchecked


here we can select the application icon


Select Blank Activity
& Just finish it here with activity name as MainActivity

Here Our Android Activity is Created without PhoneGap integration. Now will start making some changes for implementing Phonegap. 

Now if our application consoles error like "Unable to execute dex: java.nio.BufferOverflowException" then we have to add 

sdk.buildtools=18.1.1

in project property file bottom.


Phonegap implementation

In the root directory of project, create a new directory as 
/assets/www
Copy cordova-x.x.x.js from Cordova download earlier to assets/www
Create a index.html file in assets/www directory.
Copy cordova-x.x.x.jar from Cordova download earlier which we build using ant jar to /libs
Copy xml folder from your Cordova download earlier to /res

Verify that cordova-x.x.x.jar is listed in the Build Path for the project. Right click on project and go to Build Paths => Configure Build Path.... Then, in the Libraries tab, add cordova-x.x.x.jar to the project using Add JARs... . If our jar file is not visible the refresh the project & do again the above step.



Now make some changes in MainActivity.java
from

package com.example.myapp; 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu; 
public class MainActivity extends Activity { 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
to 
package com.example.myapp; 
import android.os.Bundle;
import org.apache.cordova.*; 
public class MainActivity extends DroidGap { 
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Here we done. Now build the project & run it as Android Application. in AVD emulator it will launch the application & will navigate to our Landing Page index.html.

Note: we have to place HTML pages  within assets/www folder.

Now open "AndroidManifest.xml" where we Can Add
android:configChanges="orientation|keyboardHidden|keyboard|locale"
within Activity tag to Support orientation changes. Also add some additional permission's to our application so that it can access device features.

<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" /> 

These permissions are Optional, just add which ever is required.