ISN (International Social Networking Services - Interactive Apps and Websites)



Getting started with PhoneGap in Eclipse for Android


Requirements

 

Prerequisite knowledge

 

While not required, some knowledge of HTML, JavaScript, CSS, XML, and Eclipse will help you make the most of this article.

 

Additional required other products

Eclipse Classic //www.eclipse.org/downloads/

Android SDK //developer.android.com/sdk/index.html

PhoneGap //phonegap.com/download

 

User level : All

 

 

Eclipse is an open source integrated development environment (IDE) that supports many technologies, but this article is focused on its support of Java, the native language for Android applications. Android is Google's open source mobile operating system. Android is the operating system for many smartphone and tablet devices, including the Samsung Galaxy line of phones and tablets, the Amazon Kindle Fire tablet, and the Barnes and Noble Nook tablet, as well as many other devices from numerous manufacturers. PhoneGap is an open source application platform that enables you to create natively-installed mobile applications using HTML and JavaScript.

Setting up Eclipse

The first step in setting up your development environment for PhoneGap applications on Android is to download and install the Eclipse IDE.

 

Android development with PhoneGap can be done in Windows, OS X, or Linux. There are many different installation packages for Eclipse. While PhoneGap may work with other package configurations, the Eclipse Classic package is recommended and already includes tools that you need to get started and be productive with PhoneGap application development.

 

  1. Visit the Eclipse downloads page to download the Eclipse Classic package for your operating system. The Eclipse download will be an archive containing the development environment.
  2. Extract the archive to your local hard disk and remember its location.
  3. Once extracted, you can launch Eclipse by double-clicking the Eclipse application, without any additional setup steps.

 

Setting up Android Tools

 

After you have downloaded and set up Eclipse, you will need to configure your environment to use Google's Android development tools. There are two steps to this process. First, you download and install the Android SDK. Second, you install the ADT plugin for Eclipse.

 

Download and configure the Android SDK

 

The first step in configuring Android tools on your system is to download the Android SDK.

  1. Visit the Android SDK site to download the appropriate build for your operating system.
  2. Extract the downloaded archive to your local hard drive and remember its location.

 

Configure the ADT Plugin for Eclipse

 

Next, you need to set up the ADT (Android Development Tools) plugin for Eclipse. The ADT plugin must be installed through the Eclipse Install New Software wizard.

  1. Start Eclipse.
  2. Follow the download instructions for the ADT plugin, available at the Android developer SDK page for Eclipse. These steps will guide you through the installation of the ADT plugin.
  3. Restart Eclipse.

 

Once you've installed the ADT plugin and restarted Eclipse, you need to configure it to use reference the Android SDK that you have already downloaded to your local file system.

  1. Follow the instructions on the Android developer SDK page for configuring Eclipse to set the appropriate Android SDK location in the ADT plugin.

 

Downloading and installing PhoneGap

 

The next step is to download and set up PhoneGap.

  1. Visit the PhoneGap download page and click the orange Download link to begin the download process.
  2. Extract the archive to your local file system for use later.

 

You are now ready to create your first PhoneGap project for Android within Eclipse.

 

Note: The steps that follow are for PhoneGap 1.5, but the process should be applicable or similar for all versions of PhoneGap.

 

Creating the project in Eclipse

 

Follow these steps to create a new Android project in Eclipse:

  1. Choose New > Android Project (see Figure 1).

 

 

create android project

 

Figure 1. Creating a new Android project.
 

After you create a new, standard Android project you will update that project to use PhoneGap.

  1. In the New Android Project dialog box, type a project name and select Create New Project In Workspace (see Figure 2).
  2. Click Next.

 

 

how to create android with phonegap

Figure 2. The New Android Project dialog box.
 

  1. Select the Android 2.2 build target, and click Next (see Figure 3).

 

Note: Choosing the Android 2.2 build target will configure the compiler to target the Android 2.2 SDK, and will ensure that your PhoneGap application will work on devices running Android 2.2 and newer versions of the operating system.

 

 

chose android version with phonegap

Figure 3. Selecting a build target
 

  1. On the Application Info screen, type a package name for your main Android application (see Figure 4). This should be a namespace that logically represents your package structure; for example, com.yourcompany.yourproject.
  2. Click Finish.

 

  • In the root directory of your project, create two new directories:

    • /libs
    • assets/www
  • Copy cordova-1.9.0.js from your Cordova download earlier to assets/www
  • Copy cordova-1.9.0.jar from your Cordova download earlier to /libs

 

  • Copy xml folder from your Cordova download earlier to /res

  • Verify that cordova-1.9.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path.... Then, in the Libraries tab, add cordova-1.9.0.jar to the project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.

 

 

cordova-1.9_deploying-android

Edit your project's main Java file found in the src folder in Eclipse:

 

  • Add import org.apache.cordova.*;
  • Change the class's extend from Activity to DroidGap
  • Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");

 

helloword_android_phonegap_cordova

  • Right click on AndroidManifest.xml and select Open With > XML Editor

  • Paste the following permissions between the and tags.

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

  • Support orientation changes by pasting the following inside the tag.

    android:configChanges="orientation|keyboardHidden|screenSize"

  • Your AndroidManifest.xml file should look like

 

android_xml-phonegap_cordova

Hello World

Hello World

5A. Deploy to Simulator

  • Right click the project and go to Run As > Android Application
  • Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll need to create it.

 

5B. Deploy to Device

  • Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)
  • Right click the project and go to Run As > Android Application

 

Done!
By continuing to use this site, you agree to the use of cookies to personalize content and advertisements, to provide social media functionality, to analyze our traffic using Google services like Analytics and Adsense.

Google Adsense and its partners may use your data for advertising personalization and cookies may be used for personalized and non-personalized advertising. How does Google use my data?
Please use the following button to see the list of Google partners as well as all the details regarding cookies.
See detailsI Accept
These cookies are mandatory for the operation of isn-services.com, if you do not accept them please quit this site.
You have the right to refuse cookies and leave the site or to change the parameters.