Creating A WebView Control In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps. (Ex. Windows phone, Android, and iOS). The code sharing concept is used in Xamarin, basically.  The Xamarin Studio is available in Visual Studio also.

The WebView Control is used to view the web pages in Android apps.

Prerequisites

• Visual Studio 2015 Update 3

The following steps are needed to be followed in order to create a WebView Control in Android app.

Step 1

Click File--> New --> Project. Or, click (Ctrl+Shift+N). This will open all types of projects in Visual Studio.



Step 2

After opening the New Project, select Installed -->Templates --> Visual C# --> Android --> choose Blank App (Android).

Next, give your Android app a name (Ex:sample) and give path to your project.Click OK.



Step 3

Next, go to the Solution Explorer and select Resource --> Layout --> double click to open Main.axml page. Here you can either select design view or code view, for designing your application page. 



Step 4

We will open the main page designer view. Now, delete the Linear Layout and default "hello world" button from source panel coding.

Now delete C# button from MainActivity.cs page.

Step 5

Next, go to the toolbox window where you have all types of the tools and controls.

 

Scroll down and drag and drop the WebView.

Step 6

Next, go to the properties window and edit the Web View id value (Ex:android:id="@+id/webview").



Step 7

In this step, go to the Main.axml page source panel and note the id value for future reference.



Main.axml

<?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" />

Step 8

Next, go to the MainActivity.cs page and write the following code.



MainActivity.cs

Add a "using" directive for Webkit using Android.Webkit;
At the top of the class, declare a WebView object WebView web_view;

Step 9

MainActivity.cs

write the following code from OnCreate() 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");
    web_view.SetWebViewClient(new HelloWebViewClient());
}
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);
}
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;
    }
}

Step 10

Give your app permission to access the internet. For this, go to Solution Explorer--> Properties--> right click--> Open.



Step 11

After opening the properties options, select Android Manifest --> Required Permissions --> Check INTERNET.



Step 12

If you have an Android Virtual device, run the app on it. Else, connect your Android phone and run it on that. 

 

Simply, connect your phone and go to Visual Studio. The connected phone will show up in the Run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)).

 

Click the Run option.

Output

After a few seconds, the app will start running on your phone.



When internet issue shows the error.



Summary

So, this was the process of creating a WebView Control in Xamarin Android app, using Visual Studio 2015 update 3.