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.

Web View Control in Xamarin

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. 

Web View Control in Xamarin

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.

Web View Control in Xamarin

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.

Web View Control in Xamarin

Step 6

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

Web View Control in Xamarin

Step 7

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

Web View Control in Xamarin

Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <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.

Web View Control in Xamarin

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
  1. write the following code from OnCreate() method.  
  2.   
  3. protected override void OnCreate(Bundle bundle) {  
  4.     base.OnCreate(bundle);  
  5.     // Set our view from the "main" layout resource  
  6.     SetContentView(Resource.Layout.Main);  
  7.     web_view = FindViewById < WebView > (Resource.Id.webview);  
  8.     web_view.Settings.JavaScriptEnabled = true;  
  9.     web_view.LoadUrl("http://www.google.com");  
  10.     web_view.SetWebViewClient(new HelloWebViewClient());  
  11. }  
  12. public override bool OnKeyDown(Android.Views.Keycode keyCode, Android.Views.KeyEvent e) {  
  13.     if (keyCode == Keycode.Back && web_view.CanGoBack()) {  
  14.         web_view.GoBack();  
  15.         return true;  
  16.     }  
  17.     return base.OnKeyDown(keyCode, e);  
  18. }  
  19. In the HelloAndroid Activity, add this nested class  
  20. public class HelloWebViewClient: WebViewClient {  
  21.     public override bool ShouldOverrideUrlLoading(WebView view, string url) {  
  22.         view.LoadUrl(url);  
  23.         return true;  
  24.     }  
  25. }  
Web View Control in Xamarin

Step 10

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

Web View Control in Xamarin

Step 11

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

Web View Control in Xamarin

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.

Web View Control in Xamarin

Output

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

Web View Control in Xamarin

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.