articles

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

Getting started with PhoneGap in Eclipse for Android

Manoj Pandey4241 25-Mar-2015

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 
Getting started with PhoneGap in Eclipse for Android 

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 


Getting started with PhoneGap in Eclipse for Android 


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

Getting started with PhoneGap in Eclipse for Android


Updated 07-Sep-2019

Leave Comment

Comments

Liked By