Cross Platform
Android
iOS
Mac
Test Cloud

Web View

<a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> allows you to create your own window for viewing web pages (or even develop a complete browser). In this tutorial, you'll create a simple <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.App.Activity" target="_blank">Activity</a> that can view and navigate web pages.

  1. Create a new project named HelloWebView.
  2. Open the Resources\Layout\Main.axml file and insert the following:
    <?xml version="1.0" encoding="utf-8"?>
    <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />
  3. Now open the Activity1.cs file. Add a using directive for Webkit:

    using Android.Webkit;

    At the top of the class, declare a <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> object:

    WebView web_view;

    Then use the following code for the <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.App.Activity.OnCreate(Android.OS.Bundle)" target="_blank">OnCreate()</a> method:

    protected override void OnCreate (Bundle bundle)
    {
            base.OnCreate (bundle);
    
            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);
    
            web_view = FindViewById<WebView> (Resource.Id.webview);
            web_view.Settings.JavaScriptEnabled = true;
            web_view.LoadUrl ("http://www.google.com");
    }

    This initializes the member <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> with the one from the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.App.Activity" target="_blank">Activity</a> layout and enables JavaScript for the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> with <a href= "http://androidapi.xamarin.com/?link=P%3aAndroid.Webkit.WebSettings.JavaScriptEnabled" target="_blank">JavaScriptEnabled</a> = true. Finally, an initial web page is loaded with <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView%2fM%2fLoadUrl" target="_blank">LoadUrl(String)</a>.

  4. Because this application needs access to the Internet, you need to add the appropriate permissions to the Android manifest file. Bring up your project's properties with Project -> HelloWebView Properties.  This can be done is Xamarin Studio by right clicking on the project and going to Options -> Android Application. Since there is no default manifest file, click the link to add one:







    Now that you have a manifest, you can specify which permissions your application requires to operate. For our web browser, we need the INTERNET permission to access the internet:

  5. You can give some more space for web pages by removing the title bar, using the "NoTitleBar" theme specified in the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.App.ActivityAttribute" target="_blank">[Activity]</a> attribute:
    [Activity (Label = "Web View Sample", MainLauncher = true, Theme = "@android:style/Theme.NoTitleBar")]
  6. Now run the application.

    You now have a simplest web page viewer. It's not quite a browser yet because as soon as you click a link, the default Android Browser handles the Intent to view a web page, because this <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.App.Activity" target="_blank">Activity</a> isn't technically enabled to do so. Instead of adding an intent filter to view web pages, you can override the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebViewClient" target="_blank">WebViewClient</a> class and enable this <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.App.Activity" target="_blank">Activity</a> to handle its own URL requests.

  7. In the HelloAndroid Activity, add this nested class:
    public class HelloWebViewClient : WebViewClient
    {
            public override bool ShouldOverrideUrlLoading (WebView view, string url)
            {
                    view.LoadUrl (url);
                    return true;
            }
    }
  8. Then towards the end of the <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.App.Activity.OnCreate(Android.OS.Bundle)" target="_blank">OnCreate(Bundle)</a> method, set an instance of the HelloWebViewClient as the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebViewClient" target="_blank">WebViewClient</a>:
    web_view.SetWebViewClient (new HelloWebViewClient ());

    This line can go anywhere following the initialization of the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> object.

    This creates a <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebViewClient" target="_blank">WebViewClient</a> that will load any URL selected from this <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> into the same <a href= "http://androidapi.xamarin.com/?link=T:Android.Webkit.WebView" target="_blank">WebView</a>. The <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.Webkit.WebViewClient.ShouldOverrideUrlLoading(Android.Webkit.WebView%2cSystem.String)" target="_blank">ShouldOverrideUrlLoading(WebView, String)</a> method is passed the current <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> and the URL requested, so all it needs to do is load the URL in the given view. Returning true says that the method has handled the URL and the event should not propagate (in which case, an Intent would be created that's handled by the Browser application).

    If you run the application again, new pages will now load in this Activity. However, you can't navigate back to previous pages. To do this, you need to handle the BACK button on the device, so that it will return to the previous page, rather than exit the application.

  9. To handle the BACK button key press, add the following method inside the HelloWebView Activity:
    public override bool OnKeyDown (Android.Views.Keycode keyCode, Android.Views.KeyEvent e)
    {
            if (keyCode == Keycode.Back && web_view.CanGoBack ()) {
                    web_view.GoBack ();
                    return true;
            }
    
            return base.OnKeyDown (keyCode, e);
    }

    This <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.App.Activity.OnKeyDown(Android.Views.Keycode%2cAndroid.Views.KeyEvent)" target="_blank">OnKeyDown(int, KeyEvent)</a> callback method will be called anytime a button is pressed while in the Activity. The condition inside uses the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Views.KeyEvent" target="_blank">KeyEvent</a> to check whether the key pressed is the BACK button and whether the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> is actually capable of navigating back (if it has a history). If both are true, then the <a href= "http://androidapi.xamarin.com/?link=M%3aAndroid.Webkit.WebView.GoBack" target="_blank">GoBack()</a> method is called, which will navigate back one step in the <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a> history.Returning true indicates that the event has been handled. If this condition is not met, then the event is sent back to the system.

  10. Run the application again. You'll now be able to follow links and navigate back through the page history.

When you open the application, it should look like this:

Resource

  • <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebView" target="_blank">WebView</a>
  • <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Webkit.WebViewClient" target="_blank">WebViewClient</a>
  • <a href= "http://androidapi.xamarin.com/?link=T%3aAndroid.Views.KeyEvent" target="_blank">KeyEvent</a>

    Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License . This tutorial is based on the Android Web View tutorial .