Quick Start - Xamarin.Forms

Follow this guide to set up a project for Xamarin.Forms in order to easily implement the Anyline SDK.

The Xamarin Bundle

The Xamarin SDK Bundle that you can download from GitHub contains the following parts for you to get started in Xamarin:

  • BindingSource - Xamarin iOS and Android Binding Libraries

  • Examples - Xamarin.iOS, Xamarin.Android, and Xamarin.Forms example apps

  • com.anyline.xamarin.examples_<version>.apk - Prebuilt Android APK ready to install on your Android device

Requirements

To use the Anyline SDK for Xamarin.Android you need:

  • Target Android SDK Level >= 21 on your project

  • An Android device with decent camera functionality (recommended: 720p and adequate auto focus)

To use the Anyline SDK for Xamarin.iOS you need:

  • An iOS device with minimum version 12

  • An iPhone 5s or newer

  • An Apple developer account, and your device set up for development

Apple Developer Account

In order to set up an Apple Developer Account and the device, please follow the Device Provisioning Guide from the Xamarin Documentation.

Developing on a Windows Machine

If you want to develop on a Windows machine, you will require a Mac Build Host.
For more information, please check out the Windows Installation Guide from the Xamarin Documentation on how to install and run Xamarin.iOS projects on Windows.

Setup

In this section we will go through the basic process of creating and configuring a simple Anyline scanning application in Xamarin.Forms. If you are not yet familiar with Xamarin.Android, follow the Official Xamarin Android Quickstart Guide to develop an understanding on the fundamentals of Xamarin.Forms development.

Create a new Xamarin.Forms Project

If you are using Visual Studio, click File > New Project…​, select Visual C# > Cross-Plaform and create a new Blank App.

The Anyline Xamarin.Forms project basic structre

Before using any scan mode, the Anyline SDK has to be initialized within the target platform (Android / iOS). One straightforward way to do this in Xamarin.Forms is to use a DependencyService, but you can execute this initialization however best fits your project.

The advantage of using a DependencyService is that you can initialize native components, receive the results, and act upon them within your Xamarin.Forms project. To do that, in your Forms project, create a new Interface (Right click on the project > Add > New Class). We’ll call it IAnylineSDKService.cs:

namespace Anyline
{
	public interface IAnylineSDKService
	{
		bool SetupWithLicenseKey(string licenseKey, out string licenseErrorMessage);
	}
}

You are now able to call the Anyline SDK initialization in your MainPage.cs (or any other page in your Xamarin.Forms project), for example:

namespace Anyline
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();

			...

			// YOUR LICENSE KEY HERE
			string licenseKey = "YOUR_LICENSE_KEY";

            // Initializes the Anyline SDK natively in each platform and get the results back
            bool isAnylineInitialized = DependencyService.Get<IAnylineSDKService>().SetupWithLicenseKey(licenseKey, out string licenseErrorMessage);

            if (!isAnylineInitialized)
            {
                DisplayAlert("License Exception", licenseErrorMessage, "OK");
            }
			...
		}
	}
}

A minimum Anyline Xamarin.Forms project will require two aditional pages: A ScanPage and a ResultsPage. Let’s create them:

The ScanPage in this example will be entirely rendered in each platform (Xamarin.Android and Xamarin.iOS) to execute the scan functionality, so it’s not necessary to define any layout for it. In your Forms project, create a new Page (Right click on the project > Add > New Item > Content Page (C#)). We’ll call it ScanExamplePage.cs:

using System;
using Xamarin.Forms;

namespace AnylineExampleForms
{
	/// <summary>
	/// This page is rendered natively in each individual platform.
	/// The scanning results are received in the 'ShowResultsAction' action.
	/// </summary>
	public class ScanExamplePage : ContentPage
	{
		// In this example we are just receiving two pieces of information: The string Result and the Cutout Image.
		// For your use case, you can create and receive a more elaborated object to address your needs.
		public Action<string, byte[]> ShowResultsAction;

		public ScanExamplePage()
		{
			BackgroundColor = Color.Black;
			Title = "Anyline Xamarin.Forms";

			ShowResultsAction += (result, cutoutImage) =>
			{
				Device.BeginInvokeOnMainThread(async () =>
				{
					Navigation.InsertPageBefore(new ResultsPage(result, cutoutImage), this);
					await Navigation.PopAsync();
				});
			};
		}
	}
}

Now we create the ResultsPage, the page responsible for displaying the scan results. In your Forms project, create a new Page (Right click on the project > Add > New Item > Content Page). We’ll call it ResultsPage.xaml

ResultsPage.xaml
<?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="AnylineExampleForms.ResultsPage"
				Title="Scan Results"
				BackgroundColor="#1A1A1A">

	<ContentPage.Content>
		<ScrollView>
			<StackLayout VerticalOptions="FillAndExpand" Padding="20" >
				<Label x:Name="lbResult" TextColor="#32ADFF" FontSize="15" />
				<Image x:Name="imResult" Aspect="AspectFill" />

				<BoxView HeightRequest="1" BackgroundColor="#30FFFFFF" />

				<Grid Padding="0,10" ColumnSpacing="15">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="*" />
					</Grid.ColumnDefinitions>
					<Button x:Name="btHome" Text="Home" BackgroundColor="#32ADFF" TextColor="White" HorizontalOptions="FillAndExpand" />
					<Button x:Name="btScanAgain" Text="Scan again" BackgroundColor="#32ADFF" TextColor="White" Grid.Column="1" HorizontalOptions="FillAndExpand" />
				</Grid>
			</StackLayout>
		</ScrollView>
	</ContentPage.Content>
</ContentPage>
ResultsPage.xaml.cs
using System.IO;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace AnylineExampleForms
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class ResultsPage : ContentPage
	{
		public ResultsPage(string result, byte[] cutoutImage)
		{
			InitializeComponent();

			lbResult.Text = result;
			imResult.Source = ImageSource.FromStream(() => new MemoryStream(cutoutImage));

			btHome.Clicked += async (s, e) => await Navigation.PopToRootAsync();
			btScanAgain.Clicked += async (s, e) =>
			{
				Navigation.InsertPageBefore(new ScanExamplePage(), this);
				await Navigation.PopAsync();
			};
		}
	}
}

For this example, this is all we need for the Xamarin.Forms project. In the next sections we will implement the AnylineSDK initialization and also the Xamarin.Android and the Xamarin.iOS renderers for our ScanExamplePage.