Programming Reviews

Setup PhoneGap for Android on Eclipse

new-android-application-project-in-eclipse

I lately began studying to make Android apps utilizing PhoneGap. I exploit the Eclipse IDE for improvement. On this article, I’ll clarify the steps to setup PhoneGap for Android utilizing the Eclipse IDE.

This tutorial is supposed for Home windows. I used the next elements:

  • Eclipse Basic four.2.zero
  • Android SDK
  • ADT Plugin for Eclipse
  • PhoneGap 2.three.zero

Step 1: Obtain and set up the newest model of the Eclipse IDE. I like to recommend downloading the Basic model as a result of it envelops a lot of the wanted instruments and plugins.

Step 2: Obtain and set up the Android SDK. There are two packages – ADT Bundle and SDK Instruments Solely. Select an appropriate platform and obtain the SDK Instruments Solely.

Step three: Add and configure the ADT Plugin within the Eclipse IDE.

Step four: Obtain the newest model of PhoneGap and reserve it in your native disk. Extract the downloaded archive for later use.

Step 5: Now we create a brand new Android undertaking within the Eclipse IDE.

  • Begin the Eclipse IDE.
  • Go to File > New > Undertaking.
  • Within the New Venture wizard, select Android Software Undertaking beneath the Android group.
  • Click on Subsequent.

Enter Software Identify, Challenge Identify and Package deal Identify.

  • Software Identify: The appliance identify is proven within the Google Play Retailer, in addition to within the Handle Software record in Settings.
  • Venture Identify: The venture identify is simply utilized by Eclipse, however have to be distinctive inside the workspace. This will sometimes be the identical because the Software Identify.
  • Package deal Identify: The package deal identify have to be a singular identifier in your software. It’s sometimes not proven to customers, nevertheless it should keep the identical for the lifetime of your software; it’s how a number of variations of the identical software are thought-about the identical app. That is sometimes the reverse area identify of your group plus a number of software identifiers, and it have to be a legitimate Java package deal identify.
    Ex: com.fb.katana or com.fb.orca or com.nimbuzz or com.skype.raider

Select Minimal Required SDK, Goal SDK, Compile With and Theme. Click on Subsequent.

  • Minimal Required SDK: Choose the bottom model of Android that your software will help.
  • Goal SDK: Choose the very best model of Android that your software is understood to work with.
  • Compile With: Choose a goal model of Android to compile your code with, out of your put in SDKs.
  • Theme: Choose the bottom theme to make use of in your software.

new-android-application-project-name-package-android-api

On the Configure Undertaking display, I like to recommend to proceed with the default choices. You’ll be able to change the workspace if required. You will have a picture to be uploaded for the launcher icon within the subsequent display. Click on Subsequent.

On the Configure the attributes of the icon set display, browse and add a legitimate launcher icon. You’ll be able to modify different given settings if required. Click on Subsequent.

Select the kind of Exercise you’d like your software to start out with. I like to recommend selecting BlankActivity. Click on Subsequent.

  • BlankActivity: Creates a brand new clean exercise, with elective internal navigation.
  • FullScreenActivity: Creates a brand new exercise that exhibits and hides the system UI (standing bar, navigation/system bar) and motion bar, upon consumer interplay.
  • LoginActivity: Creates a brand new login exercise, permitting customers to enter an e-mail tackle and password to login or register in your service.
  • MasterDetailFlow: Creates a brand new grasp/element movement, which is 2 columns on tablets, and one column on smaller screens. This creates a grasp fragment, element fragment, and two actions.
  • SettingsActivity: Creates a brand new software settings exercise.

new-android-application-project-create-activity-580x538

Enter the Exercise Identify, Format Identify and select a Navigation Sort. Depart them to default when you don’t know what to enter or select. Click on End.

  • Exercise Identify: The identify of the exercise class to create.
  • Format Identify: The identify of the format to create for the exercise.
  • Navigation Sort: The kind of navigation to make use of for the exercise – None, Tabs, Tabs + Swipe, Swipe Views + Title Strip, and Dropdown.

Your empty Android venture is prepared now. Within the Explorer window of Eclipse, it is best to see the tree-structured file system of your undertaking.

android-project-in-eclipse-file-structure

Step 6: Your challenge nevertheless isn’t able to run PhoneGap. Now we configure your Android undertaking to make use of PhoneGap.

Create a brand new listing – belongings > www. A libs listing ought to be current instantly underneath the challenge. If not, create one.

android-project-in-eclipse-www-libs-directory

The www listing will maintain all of the HTML, CSS and JavaScript information required to develop your PhoneGap software.

Now go to the listing the place you extracted the PhoneGap information. We have to copy few information from this PhoneGap listing to your Android undertaking.

  1. Copy cordova-2.three.zero.js from phonegap-2.three.0libandroid to your android undertaking’s assetswww listing.
  2. Copy cordova-2.three.zero.jar from phonegap-2.three.0libandroid to your android undertaking’s libs listing.
  3. Copy the xml listing from phonegap-2.three.0libandroid to your android undertaking’s res listing.
  4. Now we have to add the cordova-2.three.zero.jar file to the venture’s construct path.
    Proper-click on the lib listing in your Android challenge.
    Choose Construct Path > Configure Construct Path.
    Select Java Construct Path from the left-side menu.
    Click on Add JARs.
    Browse for cordova-2.three.zero.jar in your undertaking’s libs listing.
    Click on Okay.
    Click on Okay once more.
    android-project-in-eclipse-phonegap-jar-build-path-580x165

The undertaking’s file system ought to now appear to be under, after performing the above said steps.

android-project-in-eclipse-file-structure-with-phonegap-support

PhoneGap is now built-in together with your Android undertaking. That’s you’re able to make a PhoneGap software and execute.

Step 7: We create a easy Whats up World app to check whether or not your PhoneGap is about up appropriately.

Create a brand new file named index.html within the www/belongings listing of your Android undertaking. This index.html is the entry level to your Android software. Add the next code to index.html.

MadeByWord PhoneGap App

My first Android Good day World app utilizing PhoneGap.

Now, open the Important Exercise file from the src listing. The file must be named one thing like MainActivity.java.
(the exercise file identify might differ for you, relying on what exercise identify you offered earlier than)

android-project-in-eclipse-main-activity-java

Within the exercise class, add the next import assertion.

import org.apache.cordova.DroidGap;

The present base class is Exercise. Modify it to DroidGap.

public class MainActivity extends DroidGap

Delete the next line.

setContentView(R.format.activity_main);

Add the next line instead of the above deleted line.

tremendous.loadUrl(“file:///android_asset/www/index.html”);

Change the entry modifier for the onCreate perform from protected to public.

public void onCreate(Bundle savedInstanceState)

The ultimate code within the exercise class ought to seem like this.

android-project-in-eclipse-main-activity-code-580x356

We have now configured our Android undertaking to make use of PhoneGap. Now, we configure the meta knowledge to assist PhoneGap execute correctly.

Open AndroidManifest.xml out of your Android venture. Go to the XML supply code by clicking the AndroidManifest.xml tab on the backside.

Add the next supports-screens node as a toddler of the manifest node (root node).

The supports-screens node informs PhoneGap about what sorts and sizes of screens must be supported.
[read more about supports-screens]

Now, we set the telephone permissions to be allowed by your PhoneGap software.

Copy the next uses-permission nodes as youngsters of the manifest node (root node).

These permissions inform your PhoneGap software what options of your cell phone it’s allowed to make use of. You’ll be able to later add/take away them in accordance with your software necessities.
[read more about uses-permission]

Now, we make some modifications to the exercise nodes.

Seek for the exercise which ought to a toddler of the appliance node. Add the next attribute on this exercise node.

android:configChanges=”orientation|keyboardHidden”

Create a totally new exercise node as a sibling of the prevailing exercise node. This new exercise node is required for the org.apache.cordova.DroidGap class.

Your ultimate AndroidManifest.xml file ought to appear to be this.

android-project-in-eclipse-android-manifest-xml-580x893

Your Android software is now utterly able to run utilizing PhoneGap.

Step eight: You possibly can run your Android software in both of the 2 methods:

  1. Create an Android emulator (digital gadget) in your pc.
    [read about Android virtual devices]
  2. Join your Android telephone to your pc utilizing a knowledge cable (as Media gadget MTP).

I used my Android cell phone – Samsung Galaxy S2 – to run the Android software.

  • Proper-click in your challenge.
  • Go to Run As > Android Software.
  • Your Android software ought to run in your Android telephone if the arrange has been completed appropriately.

android-project-in-eclipse-hello-world-app1

Notice: You can too learn the Getting Began with Android information offered on PhoneGap’s web site.

Please depart a remark under when you confronted any problem whereas establishing PhoneGap for Android utilizing Eclipse. Thanks.

About the author

Admin

Read More