Hello World! with PhoneGap, Android and Eclipse

Hi all! Today I want to show you, how to create Hello World PhoneGap App with Android using Eclipse. If you have some basic knowledge of HTML, CSS and JavaScript you can build the app within a few minutes. To do this you need the followings :

Eclipse : https://www.eclipse.org/downloads/packages/eclipse-mobile-developers/junosr2 (NOTE : If you donot have Java in your machine please install jdk and jre from https://docs.oracle.com/javase/7/docs/webnotes/install/ or https://www.oracle.com/technetwork/java/javase/downloads/index.html)
Android SDK : https://developer.android.com/sdk/index.html
PhoneGap : https://phonegap.com/download/

Please go to https://developer.android.com/sdk/installing/installing-adt.html and this will help you to install ADT plugin on Eclipse. Well Next follow these steps to create a new Android project in Eclipse: Create a new project on Eclipse : Start Eclipse > File > New > Projects... (or press Ctrl+N) > Select 'Android Application Project'

Now click on Next button and follow the bellow picture sequence

Now click on Finish button.

Configure this project with PhoneGap :

First add a new folder called www inside assets folder (assets/www) and inside the www folder add a new file called index.html (Right click on assets folder > New > Folder > Folder Name : www and then Right click on www > New > File > File Name : index.html)

Now extract phonegap-2.7.0.zip and go to /phonegap-2.7.0/lib/android/ folder and

Copy cordova-2.7.0.jar and paste it to libs folder within your Android project.
Copy cordova-2.7.0.js to www folder within your Android project.
Copy the xml folder to res folder within your Android project. (See the picture below)

Now open index.html file and add the following code


<!--DOCTYPE html-->
<html xml:lang="en" lang="en">
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
  <title>PhoneGap</title>
  <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
 </head>
 <body>
  <h1>Hello World!</h1>
 </body>
</html>

Now go to open MainActivity.java (HelloWorld > src > com.mayukh.helloworld > MainActivity.java) and add the following code


package com.mayukh.helloworld;

import org.apache.cordova.DroidGap;
import android.os.Bundle;

public class MainActivity extends DroidGap {

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      super.loadUrl("file:///android_asset/www/index.html");
 }
}

See the picture below

Now open AndroidManifest.xml (HelloWorld/AndroidManifest.xml - Right click on AndroidManifest.xml > Open With > Text Editor) and add the following code


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

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

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

See the picture below

Now how to run the app
Right click on your project i.e HelloWorld (NOTE : Before that make sure you have created an Android Virtual Device Manager. To create an AVD please go to the following link https://developer.android.com/tools/devices/managing-avds.html and follow the steps) then click on Run As and then click on Android Application.

Author Description

Angular 6 tutorials - Learn basics of Angular

The world of Angular

Basics of Angular 6 - ng6