In the course of this tutorial, we will take a look into using WebView in Xamarin.Android. This tutorial loads simple webpage on WebView and using WebViewClient.

Introduction to WebView

  1. WebView is an android UI component that displays webpages. It can either display a remote webpage or can also load static HTML data.
  2. This encompasses the functionality of a browser that can be integrated to application. Most of the android applications like WordPress, Flipboard, fiddly; Google Reader, etc. are integrated with WebView in order to display certain piece of online contents.
  3. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, and perform text searches and more.
  4. The implementation of WebView is quite simple like any other views, all you have to do is declare the WebView layout on your Activity or Fragment, instantiate and load the data on WebView.

Following section of the tutorial, will drive you with step by step approach to create a simple WebView with different configuration params and load stacktips.com home page.

Declare WebView Layout

As discussed, let us create a simple WebView layout that covers the full screen space.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView" />

</LinearLayout>

Load Static HTML Data on WebView

Following activity class snippet will show you how to initialize WebView instance and load static Html string onto it.

[Activity (Label = "WebViewExample", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
	protected override void OnCreate (Bundle bundle)
	{
		base.OnCreate (bundle);

		// Set our view from the "main" layout resource
		SetContentView (Resource.Layout.Main);

		// Get WebView from the layout resource,
		// and load html text data on it
		WebView mWebView = FindViewById<WebView>(Resource.Id.webView);

		string customHtml = "<html><body><h1>Hello, WebView</h1>" +
			"<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>" +
			"<p>This is a sample paragraph.</p>" +
			"</body></html>";
		mWebView.LoadData(customHtml, "text/html", "UTF-8");
	}
}

How it works?

  1. Like any other view controller, let us first instantiate WebView in your Activity by calling FindViewById() method. This requires you to import Android.Webkit package.
  2. Call LoadData() method that accepts your static Html string, mime type and the encoding format.

The output of the above code is below

Load Static HTML Data on WebView

Load Remote URL on WebView

  1. The default behavior of Android is to open device browser, when links are clicked. But as our WebView should work like a embedded browser, we must override to always open the links in the WebView instead redirecting it to the default browser.
  2. We can do this using android WebViewClient. WebViewClient helps to monitor events in a WebView. We have to override the shouldOverrideUrlLoading() method. This method allows performing your own action when a particular URL is selected. Once we are ready with the WebViewClient, we can set the WebViewClient of your WebView using the setWebViewClient() method.
  3. The WebViewClient class has some other useful methods such as OnPageStarted(), OnPageFinished() and OnReceivedError() that helps you to show loading progress of WebView content, or handle error.

Checkout my Android tutorial that explains How to show loading progress in Android WebView. Bear with me, this tutorial is written in Java. You need to take the pain to make it compatible for C#.

Now let us go back to our example, and take a look into how our activity class looks like.

[Activity (Label = "WebViewExample", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
	protected override void OnCreate (Bundle bundle)
	{
		base.OnCreate (bundle);

		// Set our view from the "main" layout resource
		SetContentView (Resource.Layout.Main);

		WebView mWebView = FindViewById<WebView>(Resource.Id.webView);
		mWebView.Settings.JavaScriptEnabled = true;

		mWebView.SetWebViewClient (new MyWebViewClient());

		//Load url to be randered on WebView
		mWebView.LoadUrl("http://www.stacktips.com");
	}

	public class MyWebViewClient : WebViewClient
	{
	  public override bool ShouldOverrideUrlLoading (WebView view, string url)
		{
			view.LoadUrl (url);
			return true;
		}

		public override void OnPageStarted (WebView view, string url, Android.Graphics.Bitmap favicon)
		{
			base.OnPageStarted (view, url, favicon);
		}

		public override void OnPageFinished (WebView view, string url)
		{
			base.OnPageFinished (view, url);
		}

		public override void OnReceivedError (WebView view, ClientError errorCode, string description, string failingUrl)
		{
			base.OnReceivedError (view, errorCode, description, failingUrl);
		}
	}
}

Output of the above code is shown below
Load Remote URL on WebView

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.
  • Srdan Turudic

    Hi

    At first, thanks for this nice and clear tutorial! I’m trying to do the same like you in Visual Studio 2013 on Windows 8.1. I’ve installed Xamarin (Android SDK/NDK and JDK) and the Android Studio. Then I created a new simple android app in the visual studio and put now your code above in my files. I’ve now got the error, that my Android SDK can not be found, but when I check the paths, they are correct and with a green tick. I also used de Android SDK Manager to install the newest packages, but this also didn’t solve the problem. I worte a new thread on the Xamarin forums: https://forums.xamarin.com/discussion/81973/android-sdk-could-not-be-found-android-sdk-location-is-correct#latest

    There are also others with the same problem and some answers to their question, but nothing helped me. Have you got an idea what could be wrong? Thanks and cheers!

  • kenyee

    Have you tried doing Javascript callbacks from the WebView into Xamarin C# code? I haven’t been able to find any way to do this. I’m trying to get a “has this webview rendered” event w/o luck (the webclient and webchromeclient callbacks for progress only indicate when something has loaded).