Monday, October 27, 2014

Tutorial on Building Web Apps in WebView

Posted by Suhel Sayyad
The internet is a huge repository of webpages and there are chances that a client application might need one or more web pages to display information to their targeted audience. Whatever, may be the requirement, there is an astonishing, simple way to achieve the desired results.
WebView class, an extension of Android’s View class, lets developers create a web page using the Android SDK. Today, we will build Web Apps in WebView.

Tutorial on Building Web Apps in WebView

Prerequisites: Basic Android knowledge, eclipse, Android SDK. If you do not have Android SKD, download the latest version from here.
Let’s get our web page built using the Android SDK.
  1. Before starting make sure that Android SDK is installed and working. Next, you have to open up the Eclipse IDE and start your new application by going to New -> Android Application Project and finish with a blank application by simply following the instructions.
  2. Manifest file stores vital information about your application. Thus, you need to modify the manifest file (stored in XML format) by following the below instructions:
    • Change the package, version name and version code accordingly.
    • Modify the SDK version of the API according to what you are using.
    • Permit your application to use the internet; without proper internet access the application will not function properly.
    • Change the fields within the application tag exactly shown below: 
    • Source Code – 1 -- http://pastebin.com/kGBiYGp6
  3. Next, you need to modify the layout manifest to let the application know that it is dealing with a web-view layout and not the app layout. In addition, we add a progress bar so that the users can see the progress of the application being loaded. The file is found within “/res/layout”.
  4. Now navigate to the folder “/src/com/APPNAME” and look for a file named “main activity”. Copy the code below and paste it into the file. Let’s explain the code (even though it is self-explanatory). Generally, we need to take care of three things, one to tell the application that to load Web View Layout. This is done by “onCreate” method when the application is opened for the first time. Another point of action to take care about is to tell the application to remove the progress bar once the loading is done. This is achieved by calling another important method called “onPageFinished”.
    Last, but not the least, the “onKeyDown” method takes care of the behavior of the back button on all Android devices. 
  5. Create new file “WebViewtechtutorials.java” and copy-paste the code below. The function overrides the web-view client class present within the Android SDK. The main purpose of the “shouldOverrideUrlLoading” is to check whether the request has come from your website and opens the app in web view form, if it actually does. Otherwise, it calls the method called “launchExternalBrowser”. 
  6. Our last step includes compiling the application as an “apk” file. The apk file can be loaded into your android device for testing purposes. To do so, go to Android Tools->Export Signed Android Package,
  7. This ends our tutorial on building “Web Apps in WebView”. Do comment below if you, the application is giving an error or you have something to improve on.