Post
Ask Question

WebView In Xamarin Android

In this article, we will learn how to use WebView in Xamarin. If you are new to this series on Xamarin, then I suggest you read my previous articles of this series.
What is WebView?

Webview is a view, which is used to display HTML content or the Web content in your app.
 
Let’s begin.

Example of Load Static HTML in Webview

Create new Xamarin Android project. Click on the Blank android app, give it a meaningful name and then click OK.

 
Add a Webview in LinearLayout(Vertical)

Main.axml Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <android.webkit.WebView  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:id="@+id/webView" />  
  12. </LinearLayout>  
Preview

 

Open MainActivity.cs, get WebView control/view from Main Layout and Load HTML data in WebView, using the code given below.

MainActivity.cs
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Webkit;  
  5.   
  6. namespace WebViewHTMLPage  
  7. {  
  8.     [Activity(Label = "WebViewHTMLPage", MainLauncher = true, Icon = "@drawable/icon",Theme ="@android:style/Theme.NoTitleBar")]  
  9.     public class MainActivity : Activity  
  10.     {  
  11.         //Creating Instance of Webview  
  12.         WebView webView;  
  13.         protected override void OnCreate(Bundle bundle)  
  14.         {  
  15.             base.OnCreate(bundle);  
  16.   
  17.             // Set our view from the "main" layout resource  
  18.             SetContentView (Resource.Layout.Main);  
  19.             //Get webView WebView from Main Layout  
  20.             webView = FindViewById<WebView>(Resource.Id.webView);  
  21.             //HTML String  
  22.             string HTMLText = "<html>" + "<body>Sample <b>HTML</b> Text<br/><br/>"+  
  23.                               "<span style='color:red;'>Application created by: Anoop Kumar Sharma<span></body>" +   
  24.                               "</html>";  
  25.             //Load HTML Data in WebView  
  26.             webView.LoadData(HTMLText, "text/html", null);  
  27.         }  
  28.     }  
  29. }  
Build and run the Application.

 
 
Example of open Web Page or URL in WebView

Let’s add a  layout (Horizontal) and WebView controls in LinearLayout (Vertical) in Main Layout. Add a plain text and button widget In Horizontal layout, as shown below.

When a user types URL or a Website name in Plaintext view and presses the Go button, we will open a Webpage in Webview widget.
 
Main.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <LinearLayout  
  7.         android:orientation="horizontal"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:id="@+id/linearLayout1">  
  11.         <EditText  
  12.             android:layout_height="match_parent"  
  13.             android:id="@+id/txtURL"  
  14.             android:layout_weight="1"  
  15.             android:layout_width="match_parent"  
  16.             android:hint="www.google.com" />  
  17.         <Button  
  18.             android:text="Go"  
  19.             android:layout_width="wrap_content"  
  20.             android:layout_height="match_parent"  
  21.             android:id="@+id/btnGo" />  
  22.     </LinearLayout>  
  23.     <android.webkit.WebView  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="match_parent"  
  26.         android:id="@+id/webView" />  
  27. </LinearLayout>  
MainActivity.cs Code
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Webkit;  
  5.   
  6. namespace WebViewinXamarin  
  7. {  
  8.     [Activity(Label = "WebViewinXamarin", MainLauncher = true, Icon = "@drawable/icon",Theme ="@android:style/Theme.NoTitleBar")]  
  9.     public class MainActivity : Activity  
  10.     {  
  11.         //Creating Instance of Button,TextView, WebView  
  12.         Button btnGo;  
  13.         TextView txtURL;  
  14.         WebView webView;  
  15.         protected override void OnCreate(Bundle bundle)  
  16.         {  
  17.             base.OnCreate(bundle);  
  18.   
  19.             // Set our view from the "main" layout resource  
  20.             SetContentView(Resource.Layout.Main);  
  21.             //Get txtURL TextView, btnGo Button,webView WebView from Main Resource Layout.  
  22.             txtURL = FindViewById<TextView>(Resource.Id.txtURL);  
  23.             btnGo = FindViewById<Button>(Resource.Id.btnGo);  
  24.             webView = FindViewById<WebView>(Resource.Id.webView);  
  25.   
  26.             //SetWebViewClient with an instance of WebViewClientClass  
  27.             webView.SetWebViewClient(new WebViewClientClass());  
  28.             webView.LoadUrl(txtURL.Text);  
  29.   
  30.             //Enabled Javascript in Websettings  
  31.             WebSettings websettings = webView.Settings;  
  32.             websettings.JavaScriptEnabled = true;  
  33.   
  34.             //btnGo Click event  
  35.             btnGo.Click += BtnGo_Click;  
  36.         }  
  37.   
  38.         private void BtnGo_Click(object sender, System.EventArgs e)  
  39.         {  
  40.             //Load URL in txtURL in WebView.  
  41.             webView.LoadUrl(txtURL.Text);  
  42.         }  
  43.     }  
  44.   
  45.     internal class WebViewClientClass : WebViewClient  
  46.     {  
  47.         //Give the host application a chance to take over the control when a new URL is about to be loaded in the current WebView.  
  48.         public override bool ShouldOverrideUrlLoading(WebView view, string url)  
  49.         {  
  50.             view.LoadUrl(url);  
  51.             return true;  
  52.         }  
  53.     }  
  54. }  
Build and run the Application.

 
 
Example of working with navigation in WebView

WebView has several methods and properties, which support navigation like GoForward(), GoBack(), CanGoBack and CanGoForward. For demonstration, we will add Back and Forward button in Main.axml layout.

Main.axml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:orientation="vertical"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.     <EditText  
  6.         android:layout_width="match_parent"  
  7.         android:layout_height="wrap_content"  
  8.         android:id="@+id/txtURL" />  
  9.     <LinearLayout  
  10.         android:orientation="horizontal"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:id="@+id/linearLayout1">  
  14.         <Button  
  15.             android:text="Back"  
  16.             android:layout_width="wrap_content"  
  17.             android:layout_height="match_parent"  
  18.             android:id="@+id/btnBack"  
  19.             android:layout_weight="1" />  
  20.         <Button  
  21.             android:text="Go"  
  22.             android:layout_width="wrap_content"  
  23.             android:layout_height="match_parent"  
  24.             android:id="@+id/btnGO"  
  25.             android:layout_weight="2" />  
  26.         <Button  
  27.             android:text="Forward"  
  28.             android:layout_width="wrap_content"  
  29.             android:layout_height="match_parent"  
  30.             android:id="@+id/btnForward"  
  31.             android:layout_weight="1" />  
  32.     </LinearLayout>  
  33.     <android.webkit.WebView  
  34.         android:layout_width="match_parent"  
  35.         android:layout_height="match_parent"  
  36.         android:id="@+id/webView" />  
  37. </LinearLayout>  
MainActivity.cs
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Webkit;  
  5. using Android.Runtime;  
  6. using Android.Views;  
  7.   
  8. namespace WebViewwithNavigation  
  9. {  
  10.     [Activity(Label = "WebViewwithNavigation", MainLauncher = true, Icon = "@drawable/icon",Theme ="@android:style/Theme.NoTitleBar")]  
  11.     public class MainActivity : Activity  
  12.     {  
  13.         Button btnBack;  
  14.         Button btnGo;  
  15.         Button btnForward;  
  16.         TextView txtURL;  
  17.         WebView webView;  
  18.         protected override void OnCreate(Bundle bundle)  
  19.         {  
  20.             base.OnCreate(bundle);  
  21.   
  22.             // Set our view from the "main" layout resource  
  23.             SetContentView (Resource.Layout.Main);  
  24.   
  25.             btnGo = FindViewById<Button>(Resource.Id.btnGO);  
  26.             btnBack = FindViewById<Button>(Resource.Id.btnBack);  
  27.             btnForward = FindViewById<Button>(Resource.Id.btnForward);  
  28.             txtURL = FindViewById<TextView>(Resource.Id.txtURL);  
  29.             webView = FindViewById<WebView>(Resource.Id.webView);  
  30.   
  31.             webView.SetWebViewClient(new WebViewClientClass());  
  32.   
  33.             WebSettings websettings = webView.Settings;  
  34.             websettings.JavaScriptEnabled = true;  
  35.   
  36.             btnGo.Click += BtnGo_Click;  
  37.             btnBack.Click += BtnBack_Click;  
  38.             btnForward.Click += BtnForward_Click;  
  39.         }  
  40.   
  41.         private void BtnForward_Click(object sender, System.EventArgs e)  
  42.         {  
  43.             //If WebView has forward History item then forward to the next visited page.  
  44.             if (webView.CanGoForward())  
  45.             {  
  46.                 webView.GoForward();  
  47.             }  
  48.         }  
  49.   
  50.         private void BtnBack_Click(object sender, System.EventArgs e)  
  51.         {  
  52.             //If WebView has back History item then navigate to the last visited page.  
  53.             if (webView.CanGoBack())  
  54.             {  
  55.                 webView.GoBack();  
  56.             }  
  57.         }  
  58.   
  59.         private void BtnGo_Click(object sender, System.EventArgs e)  
  60.         {  
  61.             webView.LoadUrl(txtURL.Text);  
  62.         }  
  63.     }  
  64.   
  65.     internal class WebViewClientClass : WebViewClient  
  66.     {  
  67.         public override bool ShouldOverrideUrlLoading(WebView view, string url)  
  68.         {  
  69.             view.LoadUrl(url);  
  70.             return true;  
  71.         }  
  72.     }  
  73. }  

Build and run the Application. Go to any Web URL (In my case, I am visiting http://www.google.com ).

 
Afterwards, I searched c-sharpcorner in Google and clicked on its official site in order to generate back history items.
 
After URL opens, click on Back and Forward button in order to navigate from one page to another.
 
I hope you liked it. Thanks. 


Similar Articles