For running application directly on the device while developing it, we need to change some options during building the application from Eclipse. Lets see what changes we need. Settings on device (mainly android device): On the home screen, go for the Menu button below the screen and tap the “Settings” option. Now, Choose “Applications” and […]

If you want to store a small amount of data locally in the mobile device then local storage feature is a good solution. It acts same as the cookies in web application and  stores the data as key value pair. The data will persists even after we close the application. It will be removed only […]

It describes how to debug a mobile webpage in a phonegap application. Weinre is used to debug a mobile web page remotely. When using  weinre, there are three programs interacting with each other.  Debug Server It’s the HTTP server that’s used by the  Debug Client  and  Debug Target.  Debug Client the web page which displays […]

Steps to Build and Run a Project in Simulator in PhoneGap 1.1.0 using XCode 3.2.6 1. Create a new PhoneGap based Xcode project. 2. Now in the xcode open the “PhoneGap.plist” under “resources” and check for these : `root DetectPhoneNumber – yes EnableAcceleration – yes AutoHideSplashScreen – yes ShowSplashScreenSpinner – yes rest are not selected […]

Steps to Build and Run a Project in Device in PhoneGap 1.1.0 using XCode 3.2.6 1. Connect your device to the MAC m/c. if Xcode displays the “unknown iOS detected” dialog, let the Xcode collect the information about the iOS version by clicking “collect”. 2. Now launch “Keychain Access”. application -> utilities -> keychain access. […]

Sometimes you might need to design different UI for mobile devices according to operating system and its version. So to know on which OS and OS version the device is operating, you can use PhoneGap by following the steps bellow. 1.Add the javascript file provided by PhoneGap/Cordova in your html page. 2.Add the event listener […]

You can find the Geolocation of your Android device using Phonegap by getting the latitude and longitude of the current position of the device. Following steps illustrate how to use Phonegap to get device current Geolocation. 1.Include the Phonegap/Cordova javascript file inside your html page. 2.Add the eventlistner to load the function when device gets […]

If you want to know whether your cellular device is connected to internet or not and which type of internet connection the device have, you can easily check it by using PhoneGap. Following steps explain how to use Phonegap to get device connection type. 1.Include the Phonegap/Cordova javascript file inside your html page. 2.Add the […]

If you want to get the images from device gallery or SD card, Phonegap can help you to do it by using the following method. 1.Include the Phonegap/Cordova javascript file inside your html page. 2.Create a function to get the images from specified source like Gallery or SD card. function getImage() { navigator.camera.getPicture(onSuccess, onFailure, { […]

You can easily find the contact list with the information like phone number, contact name, email address and birthday from Android devices by simply using PhoneGap. Following steps expalin how to use Phonegap to get the contact information. 1.Include the Phonegap/Cordova javascript file inside your html page. 2.Add the eventlistner to load the function when […]

While working on how to send SMS from smartphone using PhoneGap, I found the plugin which is really very usefull & easy to integrate with Phonegap application. Given below is the example and steps to use the plugin & send message from Android device. Targreted OS: Android Technology: PhoneGap 1. First of all you need […]

If you simply use javascript alert like alert(“This is an alert message”); in PhoneGap application,  it will display the alert with the title same as your page name (index.html). So if you want to show alert message with customized header/title and button name you can follow the steps bellow. 1. Include the PhoneGap/Cordova javascript file […]

Problem: While dealing with a scrollable view where a large numbers of data are shown I faced the following issue. When a popup shows above it, the background scrollable view still has focus and can be  scrolled in mobile devices. After much of the research I got the solution and I am sharing it below […]

Introduction: If you are opening your Android app using custom URL scheme and passing some parameter in the custom URL, then after opening the app you may need to get the parameter. So here is the solution for it. Description: Suppose you are opening your application from other application e.g. email and you need some […]

In PhoneGap, JavaScript in the Android WebView runs on the main thread along with where the Java execute method runs. This sometimes causes blocking issues in the application. PhoneGap has some options for running on a separate thread. We just need to choose the best way to implement the multi-threading based on the way our […]

Introduction: Archiving application for the release with PhoneGap 2.9.0 in XCode 4.6.3 got failed with some File Not Found Error for libCordova.a. Description: While using PhoneGap 2.9.0 to develop an application for IOS Platform,I came across a strange issue. The developed application is working perfectly in simulator as well as debug fine in IOS device. […]

If you want to disaplay a splash screen at the beginning of Phonegap based Android application you need to put splash screen image(splash.png) inside res\drawable-hdpi,  res\drawable-mdpi,  res\drawable-idpi which can be located inside your project directory. The splash screen image size should be different for different size of Android devices. For large screens size (hpdi) image […]

You can hide the Vertical and Horizontal scrollbar in PhoneGap application in Android by adding following lines in Activity.java file super.appView.setVerticalScrollBarEnabled(false); super.appView.setHorizontalScrollBarEnabled(false); After adding these lines Activity.java will look like this package com.mindfire.HelloWorld; import android.os.Bundle; import org.apache.cordova.*; public class HelloWorldActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void […]

You can hide the Vertical and Horizontal scrollbar in PhoneGap application in Android by adding following lines in Activity.java file  super.appView.setVerticalScrollBarEnabled(false);  super.appView.setHorizontalScrollBarEnabled(false); After adding these lines Activity.java will look like this package com.mindfire.HelloWorld;   import android.os.Bundle; import org.apache.cordova.*;   public class HelloWorldActivity extends DroidGap {     /** Called when the activity is first created. […]

In the AndroidManifest.xml file, add the following code to your Activity. android:theme=”@android:style/Theme.NoTitleBar.Fullscreen” This will make the activity to run in the Full Screen Mode ( no title bar & no notification bar )

If you want to disaplay a splash screen at the beginning of Phonegap based Android application you need to put splash screen image(splash.png) inside res\drawable-hdpi,  res\drawable-mdpi,  res\drawable-idpi which can be located inside your project directory. The splash screen image size should be different for different size of Android devices. For large screens size (hpdi) image […]

While working with voice to text conversion in Android I came across SpeechRecognizer plugin for PhoneGap. So bellow are the steps to integrate this plugin with Android using PhoneGap. 1. Download the SpeechRecognizer plugin from github by using this url.     https://github.com/phonegap/phonegap-plugins/tree/master/Android/SpeechRecognizer     You will find two folder as v1.8.0 and v2.0.0. So pick the v2.0.0 as we are […]

Problem: Scroll view achieved using CSS overflow scroll property for android & ios devices are never that smooth as they are in the native way. Solution: So, to achieve that smoothness, we need to use CSS positioning property as well as css3 -webkit-overflow-scrolling property. let’s see how we can achieve this. For iOs & Android […]

While working on the HTML designs, I came across some of the design issues that I would like to share them along with the solutions. Requirement #1: A scrollable view with fixed header and footer with 50px of height ( should work for multiple resolutions ). Basic Layout : <div class=”header”>Header</div> <div class=”content”> Content…. </div> […]