dcsimg
September 26, 2016
Hot Topics:

Using Webview in Android Applications

  • April 3, 2015
  • By Vipul Patel
  • Send Email »
  • More Articles »

Introduction

The Android platform offers a very simple way to deliver a web application or a web page as part of a native Android application. This is facilitated by using the WebView control, which is an extension of the View class http://developer.android.com/reference/android/view/View.html.

The Webview has a very humble offering; it only renders the web page. It does not offer any controls for navigation or support for the address bar. It truly is barebones.

Webviews are a useful way to represent content that is susceptible to change over time (for example, help contents or terms and conditions). Webviews also can be used when you want to project a portion of user data that already exists as a separate offering without needing to build data plugins to parse and re-present it in the client Android application.

Webviews are enabled by creating an Activity class that contains a Webview object that displays the content you want to render.

Hands On

Launch Android Studio and click "Start a new Android Studio project".

View1
Figure 1: Launching Android Studio

Give the application a suitable name and click Next.

View2
Figure 2: Naming your project

Select your target on the next screen. For the purpose of this demo, we will stick with defaults.

View3
Figure 3: Selecting your target

Select "Blank Activity" on the next screen and click Next.

View4
Figure 4: Selecting "Blank Activity"

Give an appropriate name for the Activity on the last page of the Wizard and click Next to create your application.

Once the default activity is generated, add a couple of controls on the page—one a button and the other a webview.

View5
Figure 5: Adding some controls

Your activity_main.xml will look as under when you have added the controls.

<RelativeLayout xmlns:android="http://schemas.android.com/
      apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
      tools:context=".MainActivity">

   <TextView android:text="@string/hello_world"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textView" />

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Click Me to enable Webview"
      android:id="@+id/buttonClick"
      android:layout_below="@+id/textView"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />

   <WebView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/myWebView"
      android:layout_below="@+id/buttonClick"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="124dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />

</RelativeLayout>

Now, we will implement the Click event handler of the button. In this event, we will load a page in the Webview.

The XML changes are highlighted:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Click Me to enable Webview"
   android:id="@+id/buttonClick"
   android:layout_below="@+id/textView"
   android:layout_toRightOf="@+id/textView"
   android:layout_toEndOf="@+id/textView"
   android:onClick="LaunchWebView" />

Next, we implement the LaunchWebVIew method in MainActivity.java:

package com.example.vipulp.mywebview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebView;


public class MainActivity extends ActionBarActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }


   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar
      // if it is present.
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();

      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
         return true;
      }

      return super.onOptionsItemSelected(item);
   }



   public void LaunchWebView(View view) {
      WebView myWebView = (WebView) findViewById(R.id.myWebView);
      myWebView.loadUrl("http://www.google.com");
   }
}

Finally, we need to update the Android Manifest file to allow for INTERNET permissions on the application.

Open the AndroidManifest.xml file under app->manifests and make the following change.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/
      apk/res/android"
   package="com.example.vipulp.mywebview" >

   <uses-permission android:name=
      "android.permission.INTERNET" />

   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
         <intent-filter>
            <action android:name=
               "android.intent.action.MAIN" />

            <category android:name=
               "android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>

</manifest>

Our basic application is now ready.

We can compile and run our application now. When the application launches, when we click the button, we will notice that the Google home page is displayed.

Summary

In this article, we learned about the WebView control and built a simple Android application to display a webpage in an Android client app.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.


Tags: Java, XML, Android, android studio, WebView




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel