Installing Android SDK and PhoneGap to Eclipse IDE in xubuntu 12.10

I am writing this post as part of a course called Mobiilituotekehitys (Mobile development) held by Tero Karvinen http://terokarvinen.com/2012/aikataulu-mobiilituotekehitys-bus4tn008-2

I am using 64-bit Xubuntu 12.10 on a HP EliteBook 2560p Laptop.

On this post I will go through the following:

  • Install Eclipe IDE
  • Install android eclipse plugin & SDK
  • Android HelloWorld
  • Install PhoneGap
  • PhoneGap/Cordova HelloWorld

I followed the instructions found at http://terokarvinen.com/2012/hello-phonegap-from-xubuntu-12-04-live-cd while writing this post.

Installing Eclipse & Android SDK

First of all I started by installing 32-bit libraries followed by the Eclipse IDE.

$ sudo apt-get update
$ sudo apt-get install ia32-libs eclipse

After the installation finished, I started Eclipse.

I clicked ‘Help’ -> ‘Install New Software…’
which opened the following window:

I inserted the address https://dl-ssl.google.com/android/eclipse/ in the bar located in the top of the window and clicked ‘add’ and ok. I checked the ‘Developer tools’ and clicked the following as prompted: ‘next’, ‘next’, ‘I accept the terms of…’, ‘Finish’ ‘next’ and ‘Yes’.

After eclipse restarted I unchecked the ‘install latest version…’ and checked the ‘Install Android 2.2…’ and clicked ‘next’. I chose not to send usage statistics to google and clicked ‘Finish’. When asked to choose packages to install, I chose ‘Accept All’ and clicked ‘Install’.

Android HelloWorld

After the installation was done, I opened a new android project:

‘File’ -> ‘New’ -> ‘Project’ -> search for ‘android’ -> ‘Android Application Project’

I named the Application “Hello Android” and clicked ‘next’, ‘next’, ‘next’, ‘next’, ‘Install/Upgrade’, ‘Accept All’, ‘Install’, ‘Finish’.

Once the installation was done, I navigated to ‘Project Explorer’ on the left and chose ‘Hello Android’ -> ‘src’ -> ‘com.example.hello.android’ -> ‘MainActivity.java’ -> ‘MainActivity’. Now that the java file was opened, I clicked ‘Run As…’ (A button with a white triangle inside a green circle… play?) -> ‘Android Application’ -> ‘OK’

I clicked yes to add a new virtual device, I chose ‘Launch new…’ -> ‘Manager’ -> ‘New’, I named it api8, target: “Android 2.2 – API Level 8” -> ‘Create AVD’ -> ‘Start…’ -> ‘Launch’. The virtual device loads awhile. After the device’s “desktop” was loaded, I minimized it and noticed that the MainActivity.java’s launch was canceled (propably because it took so long for the virtual device/emulator to load). So I relaunched it pressing the same ‘run’ button as before. This time the program launched inside of the emulator.

Setting up PhoneGap

I started by creating a new Android Application Project. Next I opened terminal and moved to the directory where I created the new project.

$ cd
$ cd workspace/Hello\ Cordova/

I created a new folder called “www” under the folder “assets”.

$ mkdir assets/www/

I downloaded PhoneGap from github

$ wget https://github.com/phonegap/phonegap/zipball/2.1.0

I unzipped the file and deleted it afterwards

$ unzip 2.1.0
$ rm 2.1.0

I copied files from the unzipped folder to other folders according to instructions at Tero’s website

$ cp -i phonegap*/lib/android/cordova*.jar libs/
$ cp -i phonegap*/lib/android/cordova*.js assets/www/
$ cp -ri phonegap*/lib/android/xml/ res/

I accepted the overwrite on the last file (config.xml)

(-i = interactive: prompt before overwrite. -r = recursive)

After all of the needed files were copied I deleted the folder I had previously unzipped.

$ rm -r phonegap-phonegap*/

I returned to Eclipse and refreshed the ‘Project Explorer’ by hitting ‘f5’ after activating the window (by selecting a folder). I checked that “cordova-2.1.0.jar” had appeared under “Hello Cordova” -> ‘libs’. I pressed mouse2 over “cordova-2.1.0.jar” and chose ‘Build Path’ -> ‘Configure Build Path…’. I opened ‘Libraries’ and clicked ‘Add JARs…’ -> “Hello Cordova” -> ‘libs’ -> ‘cordova-2-1-0.jar’. I cliked ‘OK’ and ‘OK’ and opened “MainActivity.java” under “Hello Cordova” ‘src’ etc…

I edited four lines in the java file as shown on the picture below.

Next I opened AndroidManifest.xml in text editor -mode by right clicking the file under ‘res’ and copy pasted the lines found PhoneGap’s documentation http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android (starting with the line “<supports-screens…")

between the lines

<uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

and

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

I made the index.html file by right clicking the www -folder under assets -folder and chose 'new' -> 'file'. And opened it in the text editor -mode.

I copied the full example found at PhoneGap's documentation http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#device.name_full_example

I opened the MainActivity.java -file and ran it.

I had an error and I’m not sure when it happened: I had two cordova-2.1.0.js files. One under assets/www. The correct one and one under res. I deleted the one under res and and ran the program again and the program worked fine.

Advertisements

3 thoughts on “Installing Android SDK and PhoneGap to Eclipse IDE in xubuntu 12.10

  1. Pingback: Eclipse IDE asentaminen | Terttu Koskela

Leave a Reply

Fill in your details below or click an icon to log in:

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