Phone Gap

 Android example app with PhoneGap and JQM in Holo style

In this blog I will write about how to make a app with PhoneGap and jQuery Mobile and a custom theme to have the looks of (almost) a native Android app. Including the Toast and Share plugin I wrote about earlier.I have made a complete download package of the Android project (including activity class, manifest file, html, javascript, css and images). You can import this package in Eclipse and run the example app right away or adjust it to your liking first.I have added comments in the code to explain what it does.This app is the base code of my own app called DroidPapers.

Updated 22 may 2013

– PhoneGap 2.7.0
– Improved JavaScript code with JSLint
– Changed panel behavior to the official Google style presented at Google I/O 2013.

Updated 23 may 2013

– Changed app to remove the blink issue (meta viewport). App now functions without blinking.

Updated 29 juni 2013

– Added tablet view support.
– Improved Holo colors.
– Added to GitHub public repo now (click here).
– All future updates can be found on GitHub.

Goal

My goal with this example app is to have a some sort of a template to make a new app very fast, based on the technologies supplied by PhoneGap and jQuery Mobile, using web-technology.

Details

Frameworks:

  • Suitable for Android 2.3.3 and higher. API level 10 and up to be more technical :).
  • PhoneGap 2.7.0.
  • jQuery 1.9.1
  • jQuery Mobile 1.3.1
Plugins for jQuery Mobile:
  • Energize.js (to speed up the tap and click events in the app)
Plugins for PhoneGap:
  • Toast (to show android toasts)
  • Share (to send a share intent)
Features in this example app:
  • Holo theme. Dark, light with dark header and light with light header. The last one ain’t very worked out yet, but it should give you a heads up start. The header features the same style as a native app including press effects.
  • Panel menu like the Google Plus app. Tap on title to open and tap outside panel menu to close. You can also swipe to left to close. Upon first boot the panel menu opens and closes for a brief second automatically, to demonstrate where the menu is. Panel menu content is defined only once, in the javascript.
  • Of course the use of the plugins Share and Toast.
  • Native Android like back-button behavior.
  • Supplied Gimp image files (xcf files) to easy edit the icons to your liking.
Notice: the Holo theme is almost like and very inspired by Holo for Android. It is not exactly the same for 100% as native.

Screenshots of the interface

Additional info

Download

Check my GitHub here for the source code. If you have any questions, please let me know!
Advertisements

2 thoughts on “Phone Gap

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