How To View Local Web Page Using WebView In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites

Visual Studio 2015 Update 3.

The steps, given below are required to be followed in order to view the local Webpage, using WebView in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio
or click (Ctrl+Shift+N).

Xamarin

Step 2

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

Now, give your Android app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.

Xamarin

Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Now, select Resource-->Layout-->double click to open main.axml page. To write XAML code, you need to select the source.

Choose the Designer Window, if you want to design, and you can design your app.

Xamarin

Step 4

After opening main.axml, file will open the main page designer. You can design the page, as per your desire.

Xamarin

Now, delete the Default hello world button. Go to the source panel and you can see the button coding. You need to delete it.

After deleting XAML code, delete C# button action code.

Go to the MainActivity.cs page. You need to delete the button code.

Step 5

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls.

You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls.

You need to drag and drop the WebView.

Xamarin

Step 6

Now, go to the properties Window. You need to edit the WebView's Id value.

(EX:android:id="@+id/LocalWebView" ).

Xamarin

Step 7

In this step, go to the Main.axml page source panel. Note, the VebView's Id value.

Main.axml

<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/LocalWebView" />

Step 8

In this step, add one New Folder and its name is Content.

Go to Solution Explorer-->Assets-->Right click-->Add-->New Folder and give the name (Ex:content).

Xamarin

Step 9

In this, add two folders inside the Content Folder.(Images, Style).

Go to Solution Explorer-->Assets-->Content-->Right click-->Add-->New Folder. and Give name (Ex:Images,Style).

Xamarin

Step 10

In this step, add the Image from your Local system.

Go to Solution Explorer-->Assets-->Content-->Images-->Right Click-->Add-->Existing Item (Shift+Alt+A).

Xamarin

Step 11

Now, you can choose the required image and click Add.

Xamarin

Step 12

In this step, create HTML file. Its name is Home.Html and write HTML tags, as mentioned below.

Home.HTML

<html>
<head>
<title>Xamarin</title>
<link href="Style/main.css" rel="stylesheet" type="text/css" /> </head>
<body>
<h1>My Main Page</h1> <img src="Images/monkey.png" /><br/>
<ul>
<li><a href="second.html">Second Page</a></li>
</ul>
</body>
</html>

Step 13

In this step, create another HTML file and its name is second.Html. Write HTML tags, mentioned below..

second.html

<html>
<head>
<link href="Style/Main.css" rel="stylesheet" type="text/css" /> </head>
<body>
<h1>Second Page</h1> Welcome To Xamarin.. <br/><br/> <a href="Home.html"><< Home</a> </body>
</html>

Step 14

In this step, Add HTML files into your project.

Go to Solution Explorer-->Assets-->Content-->Right Click-->Add-->Existing Item (Shift+Alt+A).

Xamarin

Step 15

Now, you can choose HTML files and click Add.

Xamarin

Step 16

In this step, create CSS file, whose name is main.css and write CSS code, as mentioned below.

main.css

body {
background - color: #636363;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
font-weight: 100;
color: white;
}
h1
{
font-size: 30pt;
text-align: center;
font-weight: 100;
}
a:link, a:visited
{
color: white;
text-decoration: none;
}
li
{
color: white;
}

Step 17

In this step, add CSS file into your project.

Go to Solution Explorer - Assets - Content - Style - Right click - Add - Existing Item (Shift+Alt+A).

Xamarin

Step 18

Now, you can choose main.css file and click add.

Xamarin

Step 19

In this step, go to MainActivity.cs page, write the code, given below between OnCreate() Method and also add Webkit Namespace.

MainActivity.cs

using Android.Webkit;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
WebView localWebView = FindViewById < WebView > (Resource.Id.LocalWebView);
localWebView.LoadUrl("file:///android_asset/Content/Home.html");
}

Step 20

If you have an Android virtual device, run the app on it, else connect your Android phone and run the app on it.

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 Run option.

Xamarin

Output

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

You will see the Local Webpage is viewed successfully.

Click second Page link.

Xamarin

You will see the second page is viewed successfully.

Xamarin

Summary

This was the process of how to view local Webpage, using WebView in Xamarin Android app, using Visual Studio 2015.