Xamarin Web View

Overview

The easiest way to get into Xamarin framework programming is creating your first webview.

A webview is something that is intended to embed a web browser inside your application.

“Webview allows you to create your own window for viewing web pages (or even develop a complete browser).” – Xamarin

In this article, I will show how to create a working Android application that loads website as a webview within your application.

If you already have a working responsive website, a webview can easily solve your problem for the need of mobile app!

Steps

Create Project

Start a new Cross Platform project in VS 2015. There are many options for the project types, we will pick “Blank Xaml App (Xamarin.Forms Portable)

cap1

Give this project and a name it will create 5 projects in your solution explorer. There will be 1 portable project where we will write most of our cross platform code and the rest of the 4 projects are for 4 individual platforms (Android, iOs,  Windows 10 and Windows Phone). We can even remove the project for the platform that you do not wish to build application for.

The main project will have an “App.cs” file which is the main entry point for our application. We will update this later as per our need later.

Check for Internet Connection

Since our application is going to need internet connection to load webpages, let’s first create a way to check whether or not the mobile has internet connection. As of now, this needs to be done being platform specific. While there are plugins for this, we will create our own mechanism for this purpose using Xamarin Forms Dependency Service.

Let’s create an interface in our main project. The interface is going to look something like this which will be implemented in for every platform.


public interface IPlatformNetworkService
{
bool HasInternetConnection();
}

In our Android prjoect, let’s add it’s implementation which will look like this:


using Xamarin.Forms;
using Android.Net;

[assembly: Dependency(typeof(YamaFriends.CP.WView.Droid.PlatformNetworkService))]

namespace YamaFriends.CP.WView.Droid
{
public class PlatformNetworkService: IPlatformNetworkService
{
public bool HasInternetConnection()
{
ConnectivityManager connectivityManager = (ConnectivityManager)Android.App.Application.Context
.GetSystemService(Android.App.Application.ConnectivityService);
NetworkInfo activeConnection = connectivityManager.ActiveNetworkInfo;
bool isOnline = (activeConnection != null) && activeConnection.IsConnected;
return isOnline;
}
}
}

But before this code can work, we will also need to provide Android project permission to network connectivity status. This should be done in the Android manifest file.

cap3

If we were developing app for iOs as well, we would need to write an implementation for iOs platform too.

XAML Page

Next, add a new Cross Platform item to your main project. Since we will be writing both XAML and C# code for loading web view, we will select Forms Xaml Page.

cap2

Now in our newly created XAML page, let’s put the following code:


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YamaFriends.CP.WView.WebViewMain">

<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 20, 10, 0"
Android="10, 0" />
</ContentPage.Padding>

<StackLayout x:Name="mainStack">
<StackLayout Orientation="Horizontal"
x:Name="stack">
<Button Text="⇐"
FontSize="Large"
HorizontalOptions="FillAndExpand"
IsEnabled="{Binding CanGoBack}"
Clicked="OnGoBackClicked" />
<Button Text="⇒"
FontSize="Large"
HorizontalOptions="FillAndExpand"
IsEnabled="{Binding CanGoForward}"
Clicked="OnGoForwardClicked" />
</StackLayout>
</StackLayout>

</ContentPage>

You might have to adjust changes for the namespaces that you have in your project.

The code behind for the XAML page will handle internet conenction checks and back and forward button clicks and also loads the webview.


using System;

using Xamarin.Forms;

namespace YamaFriends.CP.WView
{
public partial class WebViewMain : ContentPage
{
WebView webView;

public WebViewMain()
{
InitializeComponent();

IPlatformNetworkService networkService = DependencyService.Get<IPlatformNetworkService>();

if (networkService.HasInternetConnection())
{
webView = new WebView();
webView.VerticalOptions = LayoutOptions.FillAndExpand;
webView.Source = "http://www.yamafriends.com/";
stack.BindingContext = webView;

mainStack.Children.Add(webView);
}
else
{
var label = new Label();
label.VerticalOptions = LayoutOptions.Center;
label.HorizontalOptions = LayoutOptions.Center;
label.Text = "This application requires internet connection. Please check and try again!";
}

}

void OnGoBackClicked(object sender, EventArgs args)
{
webView.GoBack();
}

void OnGoForwardClicked(object sender, EventArgs args)
{
webView.GoForward();
}
}
}

Set the Source property of the webview in code behind file to your website and run the application on your Android device.

Our webview is ready to go!

Tags: