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”.
Figure 1: Launching Android Studio
Give the application a suitable name and click Next.
Figure 2: Naming your project
Select your target on the next screen. For the purpose of this demo, we will stick with defaults.
Figure 3: Selecting your target
Select “Blank Activity” on the next screen and click Next.
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.
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.
