Monday, April 29, 2013

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 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
Features in this example app:
  • Holo theme. Dark, light with dark header and light with light header. The last one isn'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.

Check out this example web-app of jpHolo through a website.

Screenshots of the interface




Additional info about the platforms

Download

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

Thank you for reading my blog!


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Thursday, April 18, 2013

PhoneGap Android Share Plugin

Update: Changed to be compatible with PhoneGap 3 and higher.

Here is a small blog about how to share text in a PhoneGap app on the Android platform. It is based on the plugin on github (link), but that plugin is slightly out-dated PhoneGap wise.

What does it do


It sends a subject and  a text (strings) to the plugin to initiate a share action in Android.

PhoneGap plugin


The above is done by creating a phonegap plugin. Create the class (.java file) in the package "org.apache.cordova.plugins"

Share.java



Create the javascript file "share.js" and include it in your HTML AFTER the include of the phonegap/cordova javascript files.

share.js



Add the following line to the "config.xml" file in your res folder of your Android project.

And from that point you can call the plugin in your application by using the statement below.

In your app (javascript)



The  script above can be adjusted to your liking of course.

If you have questions please let me know.


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

PhoneGap Android Toast Plugin

Update: Changed to be compatible with PhoneGap 3 and higher.

Here is a small blog about how to display a toast message in a PhoneGap app on the Android platform.

It is based on the plugin on github (link), but that plugin is slightly out-dated PhoneGap wise.

What does it do


It sends a text (string) with an option (long or short) to the plugin to display an Android toast message.

PhoneGap plugin


The above is done by creating a phonegap plugin.

Create the class (.java file) in the package "org.apache.cordova.plugins"

Toasts.java



Create the javascript file "toasts.js" and include it in your HTML AFTER the include of the phonegap/cordova javascript files.

toasts.js



Add the following line to the "config.xml" file in your res folder of your Android project.

And from that point you can call the plugin in your application by using the statement below.

In your app (javascript)


The  script above can be adjusted to your liking of course.

If you have questions please let me know.


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

PhoneGap Android Downloader Plugin

Update: Changed to be compatible with PhoneGap 3 and higher.

Here is a small blog about how to perform a download with a progress bar in the notification tray in a PhoneGap app on the Android platform.

It is based on the plugin on github (link), but that plugin is slightly out-dated PhoneGap wise.

What does it do


It downloads a file (url) that is send to the plugin.

PhoneGap plugin


The above is done by creating a phonegap plugin.

Create the class (.java file) in the package "org.apache.cordova.plugins"

Downloader.java



Create the javascript file "downloader.js" and include it in your HTML AFTER the include of the phonegap/cordova javascript files.

Important: be sure to change the "import org.teusink.pg_jqmexampleapp.R;" in the code above (change org.teusink to your own packagename).

downloader.js



Add the following line to the "config.xml" file in your res folder of your Android project.

And from that point you can call the plugin in your application by using the statement below.

In your app (javascript)


Notification icons


You can generate your own notification icons in the Android Asset Studio by Roman Nurik, Google (they are free to use under the Creative Commons License).

Important: these icons are used in the code, see ".setSmallIcon(R.drawable.ic_stat_notification)" part. Of course you can skip or change them, but you will have to adjust the Java code.

Support library (jar file)


Be sure to include the library "android-support-v13.jar" from the support tools (\android-sdk\extras\android\support\v13) from the Android SDK in your project (libs folder). This to make sure the notifications work on all platforms of Android 2.3.3 and higher.

The scripts above can be adjusted to your liking of course.

If you have questions please let me know.


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.