Install SDK + PhoneGap for ANDROID

Posted: March 13, 2012 in Android Posts
Tags: , , , , ,
  • 1. Requirements For ANDROID

    • Eclipse 3.4+

    There is also a Terminal version of this tutorial that doesn’t use Eclipse.

  • 2. Install SDK + PhoneGap

    Download and install Eclipse Classic

    Download and install Android SDK

    Download and install ADT Plugin

    Download the latest copy of PhoneGap and extract its contents. We will be working with the Android directory.

  • 3. Setup New Project

    • Launch Eclipse, then under the File menu select New > Android Project

    • In the root directory of the project, create two new directories:
      • /libs
      • /assets/www
    • Copy phonegap.js from your PhoneGap download earlier to /assets/www
    • Copy phonegap.jar from your PhoneGap download earlier to /libs
    • Copy xml folder from your PhoneGap download earlier to /res
    • Make a few adjustments too the project’s main Java file found in the src folder in Eclipse: (view image below)
      • Change the class’s extend from Activity to DroidGap
      • Replace the setContentView() line with super.loadUrl(“file:///android_asset/www/index.html”);
      • Add import com.phonegap.*;
      • Remove import android.app.Activity;

javaSrc

  • You might experience an error here, where Eclipse can’t find phonegap-1.0.0.jar. In this case, right click on the /libs folder and go to Build Paths/ > Configure Build Paths. Then, in the Libraries tab, add phonegap-1.0.0.jar to the Project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.
  • Right click on AndroidManifest.xml and select Open With > Text Editor
  • Paste the following permissions under versionName: (view image below)
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="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.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" />
  • Add android:configChanges="orientation|keyboardHidden" to the activity tag in AndroidManifest. (view image below)
  • Add a second activity under you appliction tag in AndroidManifest. (view image below)
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>

manifest

  • 4. Hello World

    Now create and open a new file named index.html in the /assets/www directory. Paste the following code:

    <!--DOCTYPE HTML>
    <html>
    <head>
    <title>PhoneGap</title>
    // <![CDATA[
    javascript
    " charset="utf-8" src="phonegap.js">
    // ]]>
    </head>
    <body>
    <h1>Hello World</h1>
    </body>
    </html>

    *phonegap.js might need to be replaced with phonegap..js

  • 5A. Deploy to Simulator

    • Right click the project and go to Run As and click Android Application
    • Eclipse will ask you to select an appropriate AVD. If there isn’t one, then you’ll need to create it.
  • 5B. Deploy to Device

    • Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)
    • Right click the project and go to Run As and click Android Application
  • Done!

    You can also checkout more detailed version of this guide here.

  •  

    Advertisements
    Comments
    1. fans for you and me says:

      whoah this weblog is magnificent i love studying you. Stay within the great work! You already know, so many people are shopping around with this information, you may make this happen greatly.

    2. tax lien says:

      Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

    Leave a Reply

    Please log in using one of these methods to post your comment:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s