Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

You can read this article in: English :: EspaƱol

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

May 6, 2014 Difficulty: 30 / 50 Tweet
android-green-figure

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. 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!

comments powered by Disqus

Better Docs For A Better Web - Mozilla Developer Network

Alerts

2017-02-16 - The exif_process_IFD_TAG function in ext/exif/exif.c in PHP before 5.5.35, 5.6.x before 5.6.21, and 7.x before 7.0.6 does not properly construct spprintf arguments, which allows remote attackers to cause a denial of service (out-of-bounds read) or possibly have unspecified other impact via crafted header data. Read more ...
2017-02-16 - The xml_parse_into_struct function in ext/xml/xml.c in PHP before 5.5.35, 5.6.x before 5.6.21, and 7.x before 7.0.6 allows remote attackers to cause a denial of service (buffer under-read and segmentation fault) or possibly have unspecified other impact via crafted XML data in the second argument, leading to a parser level of zero. Read more ...

See All Entries...