Step by step tutorial on how to create your own Android web-view application and have it ready for Google Play in less than an hour

If you have a mobile friendly website and you're not taking advantage of the traffic that comes from Google Play, then you're probably missing out. In this tutorial I will show you how easy it is to create a web view application using the Android SDK.
I have pushed the source code for my own application on GitHub so you can just clone it from here and then modify it accordingly.

Here's how to do it, step by step:

1. Download and install the Android SDK from here. It's a free bundle that contains everything that you need to start developing your Android application. Then open the Eclipse IDE contained in the package, navigate to New->Android Application Project and follow the on screen steps to create your own blank application.
2. The manifest file (xml files) need to be modified to allow for the web-view to work. Edit your AndroidManifest.xml by using the one I have as an example:
   • Package, version code and version name are self explanatory
   • The SDK version is the version of the API you selected when you created the application. I used 1.9
   • The uses-permission is needed because your application will need Internet access to function
   • The application tag contains data about the interface that your application will load in, application name, configuration etc. Make sure you have everything set up just like I have it in the example below.

     
       <?xml version="1.0" encoding="utf-8"?>
       <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.yourpackagename"
           android:versionCode="3"
           android:versionName="1.02" >
   
           <uses-sdk
               android:minSdkVersion="14"
               android:targetSdkVersion="19" />
         <uses-permission android:name="android.permission.INTERNET" />
           <application
               android:allowBackup="true"
               android:icon="@drawable/ic_launcher"
               android:label="@string/app_name"
               android:theme="@android:style/Theme.NoTitleBar" >
               <activity
                   android:name="com.yourpackagename.thenameofyouractivity"
                   android:label="@string/app_name" 
                   android:configChanges="orientation|screenSize" >
                   <intent-filter>
                       <action android:name="android.intent.action.MAIN" />
                       <category android:name="android.intent.category.LAUNCHER" />
                   </intent-filter>
               </activity>
               </application>
       </manifest>
     
   

3. The layout manifest also needs to be updated so that the application knows it will deal with a web-view layout. Also, we will be adding a progress bar layout to let the user know that the page application is loading. Edit your layout file accordingly - it should be in "/res/layout"

     
       <?xml version="1.0" encoding="utf-8"?>
       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="vertical">
   
       <ProgressBar
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_gravity="center"
          android:id="@+id/progressBar1"
       />
           
       <WebView 
           android:id="@+id/webview"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
       />
       </LinearLayout>
     
   

4. Inside the /src/com/APPNAME you should have a file named after your main activity name. I called mine index just because I am a web developer and it sounds familiar :). Copy an paste the code below inside that file. Although the code is self explanatory, here's a few things about the main activity class. When an Android application is opened by the user, the framework automatically calls the "onCreate" method in your main activity class, so what we do is we create an override for that method in which we tell it to load our Web View layout. Another important part is the "onPageFinished" method that tells the application to hide the progress bar once the page has finished loading. Also, the "onKeyDown" method is what we will use to handle the behavior of the back button that is present on all Android devices.
   

     
       package com.codepunker; // replace this with your package name
   
       import android.os.Bundle;
       import android.annotation.SuppressLint;
       import android.app.Activity;
       import android.content.Intent;
       import android.view.KeyEvent;
       import android.view.View;
       import android.webkit.WebView;
       import android.webkit.WebViewClient;
       import com.codepunker.codePunkerWebViewC;
       import android.net.Uri;
       import android.graphics.Bitmap;
       import android.widget.ProgressBar;
   
       public class Index extends Activity //rename Index with your activity name
       {
         private WebView codePunkerWebView;
         private ProgressBar progressBar;
   
         @Override
         public boolean onKeyDown(int keyCode, KeyEvent event)
         {
             if ((keyCode == KeyEvent.KEYCODE_BACK) && codePunkerWebView.canGoBack()) 
             {
             codePunkerWebView.goBack();
               return true;
             }
             return super.onKeyDown(keyCode, event);
         }
   
         @SuppressLint("SetJavaScriptEnabled") //remove the stupid warning
         @Override
         protected void onCreate(Bundle savedInstanceState) 
         {
         super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_index);
   
           codePunkerWebView = (WebView) findViewById(R.id.webview);
           progressBar = (ProgressBar) findViewById(R.id.progressBar1);
   
           WebViewClient client = new codePunkerWebViewC() 
           {
               @Override
               public void launchExternalBrowser(String url) 
               {
                 Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                 startActivity(intent);
               }
             
               @Override
               public void onPageStarted(WebView codePunkerWebView, String url, Bitmap favicon)
               {
                 super.onPageStarted(codePunkerWebView, url, favicon);
               }
   
               @Override
               public void onPageFinished(WebView codePunkerWebView, String url)
               {
                 super.onPageFinished(codePunkerWebView, url);
                 progressBar.setVisibility(View.GONE);
               }
           };
           
           codePunkerWebView.setWebViewClient(client);
           codePunkerWebView.getSettings().setJavaScriptEnabled(true);
           codePunkerWebView.getSettings().setUserAgentString("Codepunker.com/0.1 (http://codepunker.com/CodePunker/; info@codepunker.com)"); //change the useragent I've set up to whatever you want as your user agent string
           codePunkerWebView.loadUrl("http://www.codepunker.com"); //change this to your own website url
         }
       }
     
   

5. Inside the /src/com/APPNAME folder create a new file called codePunkerWebViewC.java and paste the code below. This is an override of the web-view client class from the Android SDK. The "shouldOverrideUrlLoading" checks if the request comes from the yourwebiste.com domain and if it does it keeps the user inside the web view, if not it calls the launchExternalBrowser() method from the main activity file.

     
       package com.codepunker; //replace this with your package name
       import android.webkit.WebView;
       import android.webkit.WebViewClient;
       import android.net.Uri;
   
       public abstract class codePunkerWebViewC extends WebViewClient 
       {
           @Override
           public boolean shouldOverrideUrlLoading(WebView view, String url) 
           {
               if (Uri.parse(url).getHost().equals("www.codepunker.com")) //replace this with the url for your website
                   return false;
               
               launchExternalBrowser(url);            
               return true;
           }
           
           public abstract void launchExternalBrowser(String url);
       }
     
   

6. Step 6: To compile your application into an "apk" file that you can load on your Android device for testing, right click on your project, the go to Android Tools->Export Signed Android Package...

Hope you enjoyed this tutorial and if you managed to publish you application on Google Play, let me know and I will have a look at it and give it a big thumbs up!