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.
Prasanna MuraliPosted Oct 22, 2016, 12:16 PM
Nice post...