Getting Started with Android
Video Tutorials:
1. Requirements
- Eclipse 3.4+
There is also a Terminal 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
- Donwload 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 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;
- 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>
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>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
*phonegap.js might need to be replaced with phonegap-<VERSION NUMBER>.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.