This tutorial describes how you can set up a development environment for building Android apps on an Ubuntu 10.10 desktop using Eclipse, the Android SDK, and PhoneGap. I will describe how to build Android apps from the command line with PhoneGap and from the GUI with Eclipse and PhoneGap and how to test them in an Android emulator and on a real Android device. PhoneGap allows you to develop your Android applications using web technologies such as HTML, CSS, and JavaScript (e.g. with JavaScript libraries such as jQuery/jQTouch), and it will turn these web apps into native Android apps (in fact, PhoneGap supports multiple platforms such as Android, iPhone, Palm, Windows Mobile, Symbian, so you can use the same sources to create apps for multiple platforms).
I do not issue any guarantee that this will work for you!
1 Preliminary Note
I will not explain how to develop an Android app using HTML, CSS, and JavaScript. You can find lots of tutorials about this on the Internet, e.g. this one:
In fact, I'm using a slightly modified version of the Twitter client described in the link to build a Twitter app in this tutorial.
2 Installing Eclipse And Prerequisites For The Android SDK/PhoneGap
First open a terminal (Applications > Accessories > Terminal):
Eclipse and the prerequisites for the Android SDK and PhoneGap can be installed as follows:
sudo apt-get install openjdk-6-jdk eclipse ruby rubygems ruby-dev git ant libxml2 libxml2-dev libxslt-dev
Next run
sudo gem install nokogiri
3 Installing The Android SDK
Open Firefox and go to http://developer.android.com/sdk/index.html. There you will find links for the Android SDK for the different platforms (Windows, Mac OS X, Linux). Copy the link location of the download for Linux (i386) (don't worry, this download works on both i386 and x86_64 platforms!)...
... and download and uncompress it as follows:
cd ~
wget http://dl.google.com/android/android-sdk_r08-linux_86.tgz
tar xvfz android-sdk_r08-linux_86.tgz
wget http://dl.google.com/android/android-sdk_r08-linux_86.tgz
tar xvfz android-sdk_r08-linux_86.tgz
This will give you the directory android-sdk-linux_86 in your home directory ($HOME). We must add the $HOME/android-sdk-linux_86/tools directory and the$HOME/android-sdk-linux_86/platform-tools directory to our PATH variable which we do as follows:
Open ~/.profile...
gedit ~/.profile
... and add the following line at the bottom of the file:
[...] PATH="$HOME/android-sdk-linux_86/tools:$HOME/android-sdk-linux_86/platform-tools:$PATH" |
To make the change effective (so that we don't have to log out and back in), run:
export PATH="$HOME/android-sdk-linux_86/tools:$HOME/android-sdk-linux_86/platform-tools:$PATH"
Now start the Android SDK:
android
This is how the Android SDK looks:
Select Available packages in the left panel and then select Android Repository in the right panel to download SDK packages:
The packages that belong to the Android Repository group should now all be checked. Click on the Install Selected button:
A new window opens; mark the Accept radio box and click on Install...
... to start the download of the SDK packages:
If ADB (Android Debug Bridge) needs to be restarted, click on Yes:
Click on Close after the download has finished - this will close the download window:
4 Integrating The Android SDK Into Eclipse
If you want to use Eclipse to create your Android apps instead of the command line, you need to integrate the Android SDK into Eclipse. To do this, start Eclipse (Applications > Programming > Eclipse):
Click on OK if you see the Workspace Launcher window (you can check the Use this as the default and do not ask again checkbox to not see this message anymore):
Now in Eclipse, go to Help > Install New Software...:
The Available Software window opens. Click on the Add... button:
A small Add Site window opens. Fill in the following values and click on OK:
- Name: ADT Plugin
- Location: https://dl-ssl.google.com/android/eclipse/
Back in the Available Software window, you should now see the software Developer Tools. Select that software and click on Next >:
In the next window, click on Next > again:
Now accept the license agreements and click on Finish:
The packages needed to integrate the Android SDK into Eclipse are now being downloaded and installed:
If you see the following message about unsigned content, it's ok to click on the OK button:
At the end of the installation, Eclipse needs to be restarted. To do this, click on Yes:
Now there's one final step to complete the Android SDK integration in Eclipse: Go to Window > Preferences:
In the Preferences window, select Android in the left panel, and then click on the Browse... button that belongs to the SDK Location field in the right panel:
Select the directory where the Android SDK is located (it's android-sdk-linux_86 in your home directory) and click on OK:
Back in the Preferences window, click on Apply (you should then see the supported Android versions in the Target Name column)...
... and then on OK:
5 Installing PhoneGap
To install PhoneGap, open Firefox and go to https://github.com/phonegap/phonegap-android. Click on theDownloads button:
Select Download .tar.gz from the overlay that comes up:
In the Firefox download dialogue, please choose Save File:
After the download has finished, go to the directory where the download has been saved (e.g. ~/Downloads/):
cd ~/Downloads/
Take a look at the directory's contents to learn how the PhoneGap download is named:
ls -l
falko@falko-desktop:~/Downloads$ ls -l
total 11184
-rw-r--r-- 1 falko falko 11452333 2011-01-24 15:40 phonegap-phonegap-android-0.9.3-21-gee01b50.tar.gz
falko@falko-desktop:~/Downloads$
total 11184
-rw-r--r-- 1 falko falko 11452333 2011-01-24 15:40 phonegap-phonegap-android-0.9.3-21-gee01b50.tar.gz
falko@falko-desktop:~/Downloads$
As you see, in my case it is named phonegap-phonegap-android-0.9.3-21-gee01b50.tar.gz. Now lets uncompress the file:
tar xvfz phonegap-phonegap-android-0.9.3-21-gee01b50.tar.gz
In my case this creates the directory phonegap-phonegap-android-ee01b50 inside the Downloads directory. I want to move that directory to my home directory and rename it to phonegap-phonegap-android:
mv phonegap-phonegap-android-ee01b50 ~/phonegap-phonegap-android
We must add the bin directory inside $HOME/phonegap-phonegap-android to our PATH variable, therefore we edit ~/.profile again:
cd ~
gedit ~/.profile
gedit ~/.profile
Replace the previously added PATH variable with this one:
[...] PATH="$HOME/android-sdk-linux_86/tools:$HOME/android-sdk-linux_86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH" |
To make the change effective, run:
export PATH="$HOME/android-sdk-linux_86/tools:$HOME/android-sdk-linux_86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"
Now we are finished with setting up our Android development environment; finally we can start doing things with it!
6 Starting An Android Emulator
The Android SDK comes with an emulator so that you can test your apps in the emulator instead of on a real Android device. To create an emulator, we first need to know which Android versions (targets) are available:
android list targets
falko@falko-desktop:~$ android list targets
Available Android targets:
id: 1 or "android-3"
Name: Android 1.5
Type: Platform
API level: 3
Revision: 4
Skins: HVGA-L, HVGA-P, QVGA-L, HVGA (default), QVGA-P
id: 2 or "android-4"
Name: Android 1.6
Type: Platform
API level: 4
Revision: 3
Skins: WVGA854, WVGA800, HVGA (default), QVGA
id: 3 or "android-7"
Name: Android 2.1-update1
Type: Platform
API level: 7
Revision: 2
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
id: 4 or "android-8"
Name: Android 2.2
Type: Platform
API level: 8
Revision: 2
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
id: 5 or "android-9"
Name: Android 2.3
Type: Platform
API level: 9
Revision: 1
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
falko@falko-desktop:~$
Available Android targets:
id: 1 or "android-3"
Name: Android 1.5
Type: Platform
API level: 3
Revision: 4
Skins: HVGA-L, HVGA-P, QVGA-L, HVGA (default), QVGA-P
id: 2 or "android-4"
Name: Android 1.6
Type: Platform
API level: 4
Revision: 3
Skins: WVGA854, WVGA800, HVGA (default), QVGA
id: 3 or "android-7"
Name: Android 2.1-update1
Type: Platform
API level: 7
Revision: 2
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
id: 4 or "android-8"
Name: Android 2.2
Type: Platform
API level: 8
Revision: 2
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
id: 5 or "android-9"
Name: Android 2.3
Type: Platform
API level: 9
Revision: 1
Skins: WVGA854, WQVGA432, WQVGA400, WVGA800, HVGA (default), QVGA
falko@falko-desktop:~$
I will now create an emulator called mySim for Android 2.2 (id 4 or android-8):
android create avd -n mySim -t android-8
(The emulator for Android 2.3 seems to be buggy; the apps I built for 2.3 crashed immediately after starting them, while they run fine on 2.2; therefore I use Android 2.2 here.)
falko@falko-desktop:~$ android create avd -n mySim -t android-8
Android 2.2 is a basic Android platform.
Do you wish to create a custom hardware profile [no] <-- ENTER
Created AVD 'mySim' based on Android 2.2,
with the following hardware config:
hw.lcd.density=160
falko@falko-desktop:~$
Android 2.2 is a basic Android platform.
Do you wish to create a custom hardware profile [no] <-- ENTER
Created AVD 'mySim' based on Android 2.2,
with the following hardware config:
hw.lcd.density=160
falko@falko-desktop:~$
To start the emulator, run:
emulator -avd mySim
It can take a few minutes until the emulator is up and running, but then it should look as follows:
