Get started building Android apps with Eclipse PhoneGap

Eclipse is an open-source integrated development environment (IDE) that supports multiple technologies, but this article focuses on Java support, which is also the "native language" of Android applications. Android is the open source mobile operating system released by Google. Android is now the operating system for many smartphones and tablet devices, including the Samsung Galaxy series phones and tablets, the Amazon Kindle Fire tablet, the Barnes and Noble Nook tablet, and many other devices produced by a large number of manufacturers. PhoneGap is an open-source application platform that allows you to create native-installed mobile applications using HTML and JavaScript.

Install Eclipse

The first step in establishing an PHONEGAP application development environment on Android is to download and install the Eclipse IDE.

Use PHONEGAP for Android development, which can be done in Windows, OS X, or Linux. There are currently many different Eclipse installation packages. Although PhoneGap can be used with other package configurations, it is recommended to use the Eclipse Classic package, which already contains the various tools required to get started with PHONEGAP application development and use.

1. Visit the Eclipse download page to download the Eclipse Classic package for your operating system. The Eclipse download will be an archive file that contains the development environment.
2. Extract the archive file to your local hard disk and remember where it is located.
3. Once the extraction is complete, simply double-click the Eclipse application to launch eclipse without any additional installation steps.

Installing Android Tools

After you download and install Eclipse, you need to configure your own environment to use Google Android development tools. This process consists of two steps. First, download and install the Android SDK. Then, install the ADT plug-in 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 website to download the appropriate version for your operating system.
2. Extract the downloaded archive file to your local hard drive and remember where it is located.

Configuring ADT plug-ins for Eclipse

Next, you need to install the ADT (Android developer) 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 on the Android developer SDK page-Eclipse get). These steps will guide you through the installation process for the entire ADT plug-in.
3. Restart Eclipse.

After installing the ADT plugin and restarting Eclipse, you need to configure it to use the Android SDK that has been downloaded to the local file system.

4. Follow the Developer SDK Page – Configure the instructions on Eclipse to set the appropriate Android SDK location in the ADT plugin.

Download and install PhoneGap

The next step is to download and install PHONEGAP.

1. Visit the PHONEGAP download page and click the Orange download link to begin the download process.
2. Extract the archive file to the local file system for later use.

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

Note: The procedure is for PhoneGap 1.5, but the process must apply to all versions of PHONEGAP, and all versions PhoneGap the same operation.

Create a project in Eclipse

To create a new Android project in Eclipse, follow these steps:

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

Figure 1. Create a new Android project.

After you create a new standard Android project, the project is updated to use PHONEGAP.

2. In the New Android Project dialog box, type the project name, and then check Create New project in Workspace (see Figure 2).
3. Click Next.

Figure 2. New Android Project dialog box.

4. Select Android 2.2 As the build target and click Next (see Figure 3).

Note: selecting Android 2.2 as the build target will configure the compiler to target the Android 2.2 SDK, which ensures that your PHONEGAP application runs on devices running Android 2.2 and newer versions of the operating system.

Figure 3. Select a build target.

5. On the Application Info screen, type the package name of your primary Android application (see Figure 4). This will be a namespace that logically demonstrates the structure of the package, such as Com.yourcompany.yourproject.
6. Click Finish.

Figure 4. Specifies the package name.

Configure items to use PhoneGap

At this point, Eclipse creates a blank Android project. However, it is not configured to use PHONEGAP. Next, you need to do the following:

1. Create a assets/www directory and a libs directory within the new Android project. All HTML and JavaScript for the PHONEGAP application interface will reside within the Assets/www folder (see Figure 5).

Figure 5. The new project directory.

2. To copy the necessary files for PhoneGap into the project, first locate the directory where you downloaded the PhoneGap, and then navigate to the Lib/android subdirectory (see Figure 6).

Figure 6. PhoneGap lib/android directory.

3. Copy the cordova-1.5.0.js to the Assets/www directory within the Android project.
4. Copy the Cordova-1.5.0.jar to the Libs directory within the Android project.
5. Copy the XML directory to the Res directory within the Android project (see Figure 7).

Figure 7. Copy the resource.

6. Next, create a file named Index.html in the Assets/www folder. This file will be used as the primary entry point for the PHONEGAP application interface
7. In index.html, add the following HTML code as a starting point for user interface development:

<!DOCTYPE HTML>

8. You need to add the Cordova-1.5.0.jar library to the build path of the Android project. Right-click Cordova-1.5.0.jar and choose Build path > Add to build path (see Figure 8).

Figure 8. Add Cordova-1.5.0.jar to the build path.

Update Activity class

You are now ready to update your Android project to make sure it starts using PHONEGAP.

1. Open your main application's active file. The name of this file is the same as your project and will be followed by the word "Activity". It will be located under the folder of the project package you specified earlier in this process src .

For my project (named Hellogap), the main Android active file is named Hellogapactivity.java, which is located in the package that I specified in the New Android Project dialog box Com.tricedesigns.hello In

2. In the main Activity class, org.apache.cordova.DroidGap Add the following import statement:

import org.apache.cordova.DroidGap;

3. Change the base class from to Activity DroidGap ; it is behind the word in the class definition extends :

public class HelloGapActivity extends DroidGap {

4. Replace the calling function with a reference to load the PhoneGap interface from the local assets/www/index.html file you created earlier setContentView() (see Figure 9).

super.loadUrl("file:///android_asset/www/index.html");

Note in the PHONEGAP project, you can reference a file that is located in the assets directory that is referenced by the URL to File:///android_asset, and then reference the path name of the file. The File:///android_asset URI will be mapped to the assets directory.

Figure 9. The main Activity class is updated.

Configure Item Metadata

You have now configured the files within your Android project to use PhoneGap. The final step is to configure the item metadata so that the PHONEGAP runs.

1. First, open the Androidmanifest.xml file in your project root. Use the Eclipse text editor by right-clicking the androidmanifest.xml file and selecting Open with > Text editor (see Figure 10).

Figure 10. Open Androidmanifest.xml.

2. In Androidmanifest.xml, add the following supports-screen XML nodes as manifest child nodes of the root node

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />

supports-screenThe node identifies the screen sizes that your application supports. You can adjust the screen and appearance settings support by changing the contents of this entry. To read more about this <supports-screens>, , please visit the Android Developer Topic – Support screen elements.

Next, you need to configure permissions for the PHONEGAP application.

3. Copy the following <uses-permission> XML nodes and paste them as <manifest> child nodes of the root node of the Androidmanifest.xml file:

<uses-permission android:name= "Android.permission.CAMERA"/> <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 "/ >

<uses-permission>The XML value identifies the features that you want to enable for your application. The above line of code enables all of the permissions required for PHONEGAP all functions to function properly. After the application is built, you may want to remove all permissions that are not actually used, which will remove the security warnings that appear during application installation. To read more about Android permissions and <uses-permission> elements, please visit the Android Developer topic – User rights element.

After the application permissions have been configured, you need to modify the existing <activity> code.

4. Finds the <activity> node, which is a <application> child node of the XML node. Add the following attribute to the <activity> node:

configChanges="orientation|keyboardHidden"

5. Next, you need to org.apache.cordova.DroidGap create a node for the class <activity> . Add the following <activity> node as <activity> the sibling node of an existing XML node.

<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>

At this point, your project has been configured to run as an Android PhoneGap project. If you experience any problems, verify your configuration based on the sample provided by the Android PhoneGap portal.

Running the application

To launch your PHONEGAP application in the Android emulator, right-click the project root and select Run as > Android application (see Figure 11).

Figure 11. Launch the Android app.

If you have not set up any Android virtual devices, you will be prompted to configure an Android virtual device. To learn more about configuring your Android emulator virtual device, visit the Android Developer Device Guide.

Eclipse will automatically launch the Android emulator instance (if it is not already running), deploy your application for the emulator, and then launch the application (see Figure 12).

Figure 12. Apps in the Android emulator.

When you run an application in the Android emulator, you may want to test it on a physical device. It is strongly recommended that you always test your application on a physical device before you deploy the application to a production environment. The computational power and appearance settings of physical devices are often different from simulators, and device testing exposes issues that may not be detected in the simulator environment.

Follow these steps to launch your application on a physical Android device:

1. Make sure that the device is connected to your computer via USB.
2. Select Run > Run configurations (see Figure 13).

Figure 13. Update the Run configuration.

3. Select your application under Android application on the left side of the Run Configurations dialog box.
4. Click the Target tab, and then select Manual as Deployment Target Selection Mode.
5. When you are ready to start the application, click Run (see Figure 14).

Figure 14. Prepare to run the application on the device.

In the Android Device Chooser dialog box, you can select an emulator or a connected Android device. All of your connected Android devices will be displayed in this list.

Figure 15. Select the Android device.

6. Select the device you want to use (see Figure 15), and then click OK.

Your PHONEGAP application will be installed and started on the device.

Next reading direction

If you've insisted on completing this section, you can start building a real Android app using PhoneGap. Next you can read the extended PhoneGap using native plug-ins for IOS.

Keep in mind that you need to build PHONEGAP applications for the user interface using HTML, CSS, and JavaScript. This allows you to easily create visually superior applications using traditional WEB development techniques. To learn more about PHONEGAP, check out the PhoneGap wiki, join PhoneGap Google Group, or learn more about PHONEGAP documentation.

Get started building Android apps with Eclipse PhoneGap