Home > DeveloperSection > Articles > Getting started with PhoneGap in Eclipse for Android

Getting started with PhoneGap in Eclipse for Android


Phonegap Phonegap 
Ratings:
0 Comment(s)
 1125  View(s)
Rate this:

Getting started with PhoneGap in Eclipse for Android


PhoneGap is an open source platform that allows you to create cross-platform mobile applications with HTML, JavaScript, and CSS. In order to interact with device hardware, PhoneGap provides a JavaScript API that will interface with features such as the on-board camera, GPS, and accelerometer. Even though PhoneGap is great for developing cross-platform applications, the code for developing applications while targetting one platform or another will vary. One of the greatest differences to overcome is the required software requirements. This tutorial will provide an in-depth review of setting up your development environment for Android, and will build a simple "Hello World" app.

You have need to follow some steps to use phone gap in eclipse

1.      Setting up Android Tools

ADT Bundle – Just a single step to setup android development environment.

2.      Downloading and installing PhoneGap

·         Visit the PhoneGap download page and click the orange Download link to begin the download process.

·         Extract the archive to your local file system for use later.

3.      Creating the project in Eclipse

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

Choose New > Android Project

4.      After create your android application project you have need Configure the project to use PhoneGap.

At this point, Eclipse has created an empty Android project. However, it has not yet been configured to use PhoneGap. You’ll do that next.

 

Create an assets/www directory and a libs directory inside of the new Android project. All of the HTML and JavaScript for your PhoneGap application interface will reside within the assets/www folder

 

 

To copy the required files for PhoneGap into the project, first locate the directory where you downloaded PhoneGap, and navigate to the lib/android subdirectory.

Add following file’s from phonegap android directorty

 

·         Copy cordova-2.7.0.js to the assets/www directory within your Android project.

·         Copy cordova-2.7.0.jar to the libs directory within your Android project.

·         Copy the xml directory into the res directory within your Android project

 

 

5.      Add following permission in Manifest file

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.myapp"

    android:versionCode="1"

    android:versionName="1.0" >

 

    <supports-screens

        android:anyDensity="true"

        android:largeScreens="true"

        android:normalScreens="true"

        android:resizeable="true"

        android:smallScreens="true" />

 

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />

 

    <uses-permission android:name="android.permission.INTERNET" />

    <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.INTERNET" />

    <uses-permission android:name="android.permission.RECEIVE_SMS" />

    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.RECORD_VIDEO" />

    <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" />

 

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.example.myapp.MainActivity"

            android:configChanges="orientation|keyboardHidden| keyboard|screenSize|locale"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

           <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

 

</manifest>

6.       Add following tag in index.html  

<!DOCTYPE html>

<html>

<head>

 <title>Demo</title></head>

<body><h1>Hello PhoneGap</h1>

</body>

</html>

7.       Add following code in MainActivity.class

 

package com.example.myapp; 

import android.os.Bundle;

import android.widget.Toast; 

import org.apache.cordova.*; 

public class MainActivity extends DroidGap { 

                @Override

                public void onCreate(Bundle savedInstanceState) {

                                try {

                                                super.onCreate(savedInstanceState); 

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

                                } catch (Exception ex) {

 

                                }

                }

 

}

Now run your application


Don't want to miss updates? Please click the below button!

Follow MindStick