WebView In Xamarin Android (by Anoop Kumar Sharma)

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 WebViewWebView 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

After URL opens, click on Back and Forward button in order to navigate from one page to another.

I hope you liked it. Thanks. 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

TOP