Android Apps

Steps to Convert a web app into Android Phonegap App

July 21, 2012 by Sarath DR in Android Apps, Featured with 28 Comments
 Steps to Convert a web app into Android Phonegap App  Steps to Convert a web app into Android Phonegap App
If you would like to improve your Javascript development skills. I recommend this book for you. It is really useful and improve your knowledge in Javascript programming. Especially the object orient features of Javascript explained perfectly in this book.
Get it Now
 

It is a little bit a tricky to convert a web application to android phonegap app but it is simple. We need to keep some settings correctly. If you follow the below steps it will find simple for you. Also this is a bookmark for me for the future reference.

Step 1: Follow the steps to create a phonegap project first. Click this link for more details

Step 2: Once you create the project add the cordova.js file in header of your web application.

Step 3: You have to add the approved list of urls in to the cordova.xml file. This will help your web app urls to open in the app itself. Edit the file res/app/xml/cordova.xml and add your web app url.

<?xml version="1.0" encoding="utf-8"?>
<cordova>
    <access origin="http://192.168.10.227:8888*"/>
    <access origin="http://127.0.0.1:8888*"/>
    <access origin="http://www.yourdomain.com*"/>
 
    <log level="DEBUG"/>
</cordova>

Step 4: You can then load url from the onCreate function.

// Loads the url - Make sure that you have added the javascript file in the web app header. 
super.loadUrl("http://www.yourdomain.com/");

Step 5: You can add the splash screen to avoid loading delay. The following code adds splash image as background image for app view and window of the app to avoid flickering while loading app. Add your splash image in the drawable folder.

        getWindow().setBackgroundDrawableResource(R.drawable.splash);
        this.setIntegerProperty("splashscreen", R.drawable.splash);
        super.setIntegerProperty("backgroundColor", Color.TRANSPARENT );
        appView.setBackgroundColor(0);
        appView.setBackgroundResource(R.drawable.splash );

Step 6: To catch the loading error over write the onReceived error in the following way

 public void onReceivedError( int errorCode, String description, String failingUrl)
 {
   		super.loadUrl("file:///android_asset/www/noConnection.html");
   		return;   		
 }

Your can convert a your mobile web app into an android app by simply following the above steps. Also you can interact with native app features using phonegap javascript apis.

Tagged , ,

Share this to

Related Posts

28 Comments

  1. chanchal sakardeJan 21, 2013 at 4:07 pmReply

    Very useful blogs… it would be more helpful for new users if you can share source code zip..

  2. Sneha PatelMar 7, 2013 at 1:02 pmReply

    Very useful blogs… it would be more helpful for new users if you can share source code zip..

    Is it possible to convert iphone app into android app using phone gap?

    please reply its urgent.

    • adminMar 7, 2013 at 1:11 pmReplyAuthor

      if it is an html based app it is possible to convert that to android app with phonegap. I will upload a sample code soon.

  3. Mallikarjun C HMar 28, 2013 at 12:39 pmReply

    Can you please give us a steps how to convert android app to ios app.
    any help will be appreciated..

  4. Dipanjan SahaJun 2, 2013 at 9:50 pmReply

    If I have a fully database driven site, with PHP Mysql, is it possible to convert in androit app?

    • adminJun 3, 2013 at 4:00 pmReplyAuthor

      yes you can convert that into an app.

  5. Dipanjan SahaJun 3, 2013 at 4:18 pmReply

    Can you please guide me or a tutorial how I can convert a PHP/Mysql site can be converted into Android App?

    • adminJun 3, 2013 at 4:23 pmReplyAuthor

      You have to host the website with an interface which suits for a mobile and host it somewhere. Then follow the above steps. Please let me know if you stuck anywhere. I can help you.

  6. Dipanjan SahaJun 3, 2013 at 4:46 pmReply

    You means suppose this link, we made it’s a mobile version, I want to use it as APP, and if I do the previous steps this will be converted to APP?

    • adminJun 3, 2013 at 5:02 pmReplyAuthor

      yes you can.

  7. bharatJul 21, 2013 at 3:49 pmReply

    Very useful great work. keep it up.

  8. AneeshAug 21, 2013 at 4:37 amReply

    I have done a native mobile project using eclipse. I would like to convert it to a phonegap project. How can I do this? Please help me.

    • adminAug 21, 2013 at 9:01 amReplyAuthor

      You have to clone the app in html then it will be easy.

      • AneeshAug 21, 2013 at 9:31 amReply

        Do I have to clone all the xml files(related to UI) to html?

      • AtulApr 25, 2016 at 2:45 pmReply

        I want convert PHP base web application with Database (Mysql), It is possible using PhoneGap?? If yes please guide me.

  9. LabsSep 11, 2013 at 5:38 amReply

    Please upload source code …………..

  10. rodiNov 13, 2013 at 12:08 amReply

    do you please have a complete demo project? I am just starting and it would be very much appreciated.

  11. TanMar 5, 2014 at 3:29 pmReply

    Hi,

    I have finished step 1. The basic folders are created. I seriously hope to convert my php into a mobile app

    How to get the cordova.js ?

    Next question I will ask is where is the onCreate function in step 3?

    • Sarath DRMar 5, 2014 at 3:34 pmReplyAuthor

      You have to download phonegap first.

      • TanMar 5, 2014 at 3:44 pmReply

        i have downloaded and created the projects through cli commands… there is no cordova.js in all the folders.

  12. BharathAug 6, 2014 at 11:38 amReply

    Can you share the code plz.
    I have created a sample web app usig html and included cordova.js in it.
    Im not able to convert this webapp to android app in eclipse.

  13. BharathAug 6, 2014 at 11:42 amReply

    sample web app that i have created

    PhoneGap

    OK

    function myclick(){
    alert(‘ok clicked’);
    }

    Welcome to Mobile!

    Mmmmm, I love me some mobile goodness!
    Helloooo

    android app same as we do with phonegap. When i make a folder app under res its throwing error. so I couldnt place the cordova.xml . Atleast a screenshot of the android app structure would help me to solve this problem

  14. ImranFeb 29, 2016 at 1:55 pmReply

    I have this url can u pls help me to convert this url into android apps

    Thank you
    Regards
    Imran khan

  15. Abhinav GuptaApr 3, 2016 at 5:10 amReply

    I want to develop a Android mobile application that will work offline after synchronization. is it possible in PhoneGap??

  16. sivaJan 2, 2017 at 5:40 pmReply

    hi there,
    i am developing a web application using html and php.
    now i want to convert this web application to android application . and i want to add or remove some features too. so can you help me where can i get the guidance

Leave a reply

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

*

About
View Sarath D R's profile on LinkedIn

I am a technology consultant and an entrepreneur focused on the following technologies Java,Spring, Android, Angular, Asterisk, Symfony, Cake , Code-Igniter, Jquery , XAMPP, XHTML, AJAX, MySql, Seo, Web Design, Wordpress, iPhone development.

Today’s Tips
  • Generate Codova.jar file from Phonegap project using ant
  • Google map javascript client  to find the geographic co-ordinates  from  Address or post code
  • Update Android main UI from Webview – Phonegap Plugin
  • Jplayer is not working  with HTC One Android 4.3 version browser
  • Regular expression to validate mobile phone numbers starting with + ( plus ) – php
  • Simple pagination script for PHP
  • Useful adb ( Android Debug Bridge ) commands
  • Change the javascript files url to absolute url – Symfony 1.4
  • Set Http authentication header from Client – PHP / CURL

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.This site also uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.

Close