m

Native Android applications are written in Java, but you don’t need to write applications using their native language any more since the PhoneGap framework is out there. PhoneGap allows developers to build mobile applications using HTML, Javascript and CSS, without caring of native languages. It also provides an API to connect to device features such as Camera, Contacts, Media, …

The advantages and disadvantages of PhoneGap apps versus native apps have been discussed many times in different articles. Briefly, we could say that the main advantage of PhoneGap apps is that they can be built using web technologies knowledge (HTML, Javascript and CSS) without having to learn specific programming languages for each platform. You can write one unique application and get builds for Android, iPhone, Blackberry, … On the other hand, its main disadvantage is the performance. PhoneGap apps are slower than native ones. This is because when you do a Javascript call, it needs to go through the PhoneGap API until it touches the final feature, while in native applications that communication is direct. Thinking on this, for mobile applications focused on data rather than on interacting with the hardware I would go for PhoneGap apps. On the other hand if you need to build an application that makes an intense use of the hardware as games then you may think in writting a native app.

After this small introduction, let’s start to prepare our environment. The official IDE (Integrated Development Environment) for Android is Eclipse but the purpose of this article is to run an Android application using only the command line interface. I try to avoid Eclipse due to its weight which makes my machine run as a turtle.

Install Android SDK

First of all we need to install Android SDK (Software Development Kit). As it is written in its web page, the Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android.

Download the SDK Tools. They also offer the ADT Bundle that integrates Android SDK, Eclipse and ADT plugin. For this post we only need to install the SDK Tools only.

Select the package for Linux 32 & 64-bit, download it and extract it in the HOME folder. This will give you the android-sdk-linux folder in your home directory ($HOME).

We must add the $HOME/android-sdk-linux/tools and the $HOME/android-sdk-linux/platforms directories to our PATH variable. We do that editing the .profile file:

Add the following line at the bottom of the file:

To make the change effective (so that we don’t have to log out and back in), run:

We also need to install java and ant:

Now start the Android SDK typing in the console:

In the shell you will see the error message “Error: Missing platform-tools” but the Android SDK Manager will open anyway suggesting you to install some packages. Install the 11 packages that are selected by default. One of them will solve the error that we got.

Android SDK Manager

Android SDK Manager

A new folder is created under $HOME/android-sdk-linux/ called platform-tools that needs to be added to the PATH variable as explained before. Change the PATH to the one show below. Don’t forget to execute the export command to make changes effective.

We also need to install the adb package.

Android Debug Bridge (adb) is a versatile command line tool that lets you communicate with an emulator instance or connected Android-powered device. It is a client-server program.

If you are on a 64bit system, you also need to install the following two packages:

 

Install PhoneGap

Download the last release of PhoneGap and extract the .zip file under the $HOME folder. We get the ~/phonegap-2.8.1/ directory.

Add the bin dir to the PATH variable in the ~/.profile file. Run the export command afterwards.

We are now ready to create and build a project using the command line interface.

Create an AVD (Android Virtual Device)

We may want to test our applications in an Android Emulator before installing them in a real device.

An Android Virtual Device (AVD) is an emulator configuration that lets you model an actual device by defining hardware and software options to be emulated by the Android Emulator.

To create a new AVD we need to generate first a list of system image targets so we get the target ids that we will use later for the creation.

This is what I get:

We can now create an AVD choosing one of the targets listed above.

android create avd -n -t

Where myAndroid is the name I give to the virtual device and android-17 the id of the configuration I chose. Instead of android-17 we can use the id 1.

You can run the emulator typing in the console:

Android Emulator

Android Emulator

To delete AVDs use the command:

In case you find errors when trying to delete an AVD, you can do it using the hard way. Go to ~/.android and delete the .ini file of your virtual device.

Create our first Android app

We could create a pure android project using the android create project command from the SDK. But since we don’t want to program a native application we will create an Android project through PhoneGap so we can use our HTML, Javascript and CSS files:

The command above corresponds to create path_to_new_project package_name project_name. The package_name should be prefixed accordingly with 3 namespace. Example: com.companyname.projectname.

It creates the myAndroidApp directory which contains everything we need to build our final app from it. The subfolder myAndroidApp/assets/www/ is the destiny for our HTML, CSS, JavaScript sources .

If you already have a web project you can copy your files under myAndroidApp/assets/www/ directory, if not you can start to create your project under it just as a pure web application.

Build your project:

By default the build is set to –debug. This option enables users to debug and interactively modify their applications during runtime. When your application is ready to go to production you will want to build in –release mode.

Run your application in the emulator:

If you have more than one AVD you need to specify a target:

Display logs:

 

Set up an Android device

You can deploy and debug your application into a real Android device just as you would on the emulator.

First of all you need to set up your Android device enabling USB debugging on your device. On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development. On Android 4.0 and newer, it’s in Settings > Developer options. On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

In the AndroidManifest.xml file, we need android:debuggable=”true”. It comes like that by default, we don’t need to do anything but be sure to disable it before you build for release.

For Ubuntu 13.04 you don’t need to define any rules but you need to do it if you are using older versions. For the latter case follow the next steps:

Log in as root and create this file: /etc/udev/rules.d/51-android.rules. Use the format below to add each vendor to the file:

In this example the idVendor is for LG. You can find a list of vendors here.

Now execute:

And we are ready to install our .apk application to the device:

 

Using device features via PhoneGap

If you need to use a device feature, for example your phone camera, you need to add to your .html file the cordova.js script that is already under the myAndroidApp/assets/www/ folder:

 

Adding plugins to your project

You may need to add plugins to your project. You can find the code and files for all supported plugins here.

To install the plugin copy the .js file to your project’s www/ folder. Let’s take the childbrowser plugin as an example. I will just follow the instructions that come in its README.md. The plugin may make use of more files besides of the .js file. You then need to copy all those files that are under the plugin www/ folder into your project’s www/folder. In this example we have to copy the childbrowser.js file and the www/childbrowser/ folder.

Add to your .html file the cordova.js and childbrowser.js scripts that are already under the myAndroidApp/assets/www/ folder.

Create a directory within your project called src/com/phonegap/plugins/childBrowser and move ChildBrowser.java into it.

Add the following line to your myAndroidApp/res/xml/config.xml file:

The plugin is ready to be used within your project.

If you plan to use the PhoneGap Build service, you need to read the instructions of how to include a plugin in the project correctly. You won’t need to do most of the steps defined above since the PhoneGap Build will do them automatically for you.

That’s all for now. Let’s start coding our Android application!

1 comment

  1. Pingback: Setting Up An Android App Build Environment With Android SDK and PhoneGap in Ubuntu 13.04 | Yaiza Bailén - appgong

Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">