Feb12

Build a Mobile Hybrid Application on Android Using PhoneGap

If you’re a Web-based developer and are looking to catch your big break in developing mobile apps, a hybrid mobile application is a good solution that will save you time from having to learn how to build native apps from scratch. As the name implies, hybrid apps are a combination of web technologies and native rendering that are capable of running on multiple devices with a single code base.

Each platform has its own framework of application development using their IDEs. Our Android Mobile App Development team recommends using PhoneGap in the targeted development environment before it can build and deploy on the platform device. Below is a guide on how to set up a PhoneGap development environment on Android in 7 easy steps.

Step 1:  Create an Android project with default option selection in an Eclipse Android IDE.

Once you’ve completed Android Project Creation, the project structure will look like this:

Image 1

Step 2:  Create a www folder inside an assets folder which is in root directory. Make sure you see the libs folder under the root directory. If you don’t see libs folder, you’ll need to create it. Once done, the folder structure will look like this:

Image 2

Step 3:  Download the latest copy of PhoneGap and extract its contents. We will be working with the Android directory. For this tutorial, we are using PhoneGap 2.9.0. Once extraction is completed, visit this directory PhoneGap-2.9.0\lib\android and pick coredova.js and cordova-2.9.0.jar and xml folder.

Step 4:  Copy cordova.js to the assets/www folder; copy cordova-2.9.0.jar to the libs folder; copy the xml folder under res. Project structure should now look like this:

Image 3

Note: Verify that cordova-2.9.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path…. Then, in the Libraries tab, add cordova-2.0.0.jar to the project.

Step 5:  Create index.html and a .css file inside the www folder and add your html content in index.html.

<h1>Hello Welcome to Phonegap</h1>

Step 6:  Open your main Android activity file (MainActivity.java) and modify it as per the content below. Make sure you add a proper import statement to eliminate any compiler error.

Image 4

Step 7:  Open AndroidManifest.xml file and update the content below between <uses-sdk and <application xml tag.

<supports-screens android:largeScreens="true"
android:normalScreens="true" android:smallScreens="true"
android:resizeable="true" android:anyDensity="true" />
<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" />

And add the below xml attribute for an activity tag.

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

Once this step is completed, the AndroidManifest.xml file should look like this:

Image 5

Step 8: You’re done! Run application on device/Simulator.

We have the index.html inside the assets/www folder. Here is a sample demo:

Image 6

The css file “hellocss.css” is located inside assets/www folder and should look like this:

Image 7

Testing the code above on a device should yield the results below:

Image 8

Wrapping Up

Hybrid apps are great options because they only have to be developed using a single code for all platforms. They typically don’t have as great of functionality as native apps when it comes to customization, performance and usage. Although developing hybrid apps can be tricky, the benefits of cross platform capabilities outweigh any development difficulties developers will face – no matter if we’re talking Android or iOS Hybrid development.

Have you had any success moving from Web-based development to Android mobile applications? Share your recommendations and preferences with us in the comments section below, and if you found this to be helpful, do us a solid and share across your social networks.

Leave a Comment

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