Xamarin.Forms Projects – Second Edition

The second edition of Xamarin.Forms Projects is now published. You can buy it from Packt or Amazon. It will also be available in other book stores.

More Information

An example-driven guide to help you build native cross-platform mobile apps using Xamarin, .NET Core 3, and Visual Studio 2019.

Set up Xamarin.Forms for building native apps with code-sharing capabilities

Understand the core aspects of developing a mobile app such as its layout, UX, and rendering

Use custom renderers to gain platform-specific access

Discover how to create custom layouts for your apps with Xamarin.Forms Shell

Use Azure SignalR for implementing serverless services in your Xamarin apps

Create an augmented reality (AR) game for Android and iOS using ARCore and ARKit, respectively

Build and train machine learning models using CoreML, TensorFlow, and Azure Cognitive Services

Xamarin.Forms is a lightweight cross-platform development toolkit for building apps with a rich user interface. Improved and updated to cover the latest features of Xamarin.Forms, this second edition covers CollectionView and Shell, along with interesting concepts such as augmented reality and machine learning.

Starting with an introduction to Xamarin and how it works, this book shares tips for choosing the type of development environment you should strive for when planning cross-platform mobile apps. You’ll build your first Xamarin.Forms app and learn how to use Shell to implement the app architecture. The book gradually increases the level of complexity of the projects, guiding you through creating apps ranging from a location tracker and weather map to an AR game and face recognition. As you advance, the book will take you through modern mobile development frameworks such as SQLite, .NET Core Mono, ARKit, and ARCore. You’ll be able to customize your apps for both Android and iOS platforms to achieve native-like performance and speed. The book is filled with engaging examples, so you can grasp essential concepts by writing code instead of reading through endless theory.

By the end of this book, you’ll be ready to develop your own native apps with Xamarin.Forms and its associated technologies such as .NET Core, Visual Studio 2019, and C#.

Develop mobile apps, AR games, and chatbots of varying complexity with the help of real-world examples

Explore the important features of Xamarin.Forms 4 such as Shell, CollectionView, and CarouselView

Get to grips with advanced concepts such as AR and VR and machine learning for mobile development

Introducing TinySvgHelper

For a pretty long time I have had code that I have used for a couple of different apps that uses SkiaSharp to convert an svg image to a Xamarin.Forms ImageSource. I also blogged about it two years ago, https://danielhindrikes.se/index.php/2018/03/13/use-skiasharp-to-convert-svg-to-xamarin-forms-imagesource/. But I never released it as a library until now.

Get started with TinySvgHelper

The library is published to NuGet, https://www.nuget.org/packages/TinySvgHelper/

To install it, search for TinySvgHelper in the **Nuget Package Manager** or install it with the following command:

Install-Package TinySvgHelper

To use it you must add SvgHelper.Init() to your MainActivity and/or AppDelegate.

MainActivity

protected override void OnCreate(Bundle savedInstanceState)
{
    ....
 
    SvgHelper.Init();
 
    ...
}

AppDelegate

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    ...
 
    SvgHelper.Init();
 
    ...
}

Use TinySvgHelper

You can use TinySvgHelper either from your XAML- or C# code. For iOS add the svg files to the **Resources** folder and for Android add the svg files to the **Assets** folder.

XAML

First you need to import the namespace:

xmlns:svg="clr-namespace:TinySvgHelper;assembly=TinySvgHelper"

Then you will use it as a markup extension:

<Image Source="{svg:Svg FileName='logo.svg', Height=200,Width=200}" />

You can also specify a color to it:

<ShellContent Icon="{svg:Svg FileName='info.svg', Height=22,Width=22,Color=Black}" Title="Start">
    <views:StartView />
</ShellContent>
```
 
### C#
<pre lang="csharp">
using TinySvgHelper;
var image = new Image();
image.Source = SvgHelper.GetAsImageSource("info.svg", 50, 50, Color.Blue);

Read more

You can find the full documentation, the code and a sample project on GitHub, https://github.com/TinyStuff/TinySvgHelper

App In The Cloud: Native mobile, desktop and WebAssembly apps with C# and XAML using the Uno Platform with Jérôme Laban

With Uno, you can build native apps and Web Assembly apps with C# and XAML using WinRT (UWP) APIs. In this episode, Daniel is talking with Jérôme Laban, the CTO of Uno Platform about what Uno is, the history of Uno, the current state of Uno and much more.

Jérôme Laban on LinkedIn: https://www.linkedin.com/in/jeromelaban/
Jérôme Laban on Twitter: https://twitter.com/jlaban

Uno website: https://platform.uno/
Uno on GitHub: https://github.com/unoplatform/uno
Uno on Twitter: https://twitter.com/UnoPlatform

Daniel Hindrikes on twitter: https://twitter.com/hindrikes
App In The Cloud on Facebook: https://www.facebook.com/appinthecloud
App In the Cloud on Twitter: https://twitter.com/AppInTheCloudPod

Intro music with a loop from https://www.looperman.com/

App In The Cloud – Live Code – Episode 1

Together with my friends and colleagues, Johan Karlsson and Mats Törnberg, we have started to live code on Twitch, https://www.twitch.tv/danielhindrikes.
Right now we have started to build a Xamarin.Forms app from scratch, the plan is to continue to build that app, live on Twitch every Monday at 12:00 CET (Swedish time). If you missed it, we will also publish all episodes on YouTube.

Here is the recording from the stream:

The Code Behind: AR for dummies

In the book Xamarin.Forms Project by me and Johan Karlsson there is a chapter about how to build an AR app using ARKit, ARCore and UrhoSharp.

In the podcast, The Code Behind, (in Swedish) that we are recording we speak about that topic. So if you don't speak Swedish, this is a great chance to learn 😉

Xamarin.Android maps – adding high-resolution map images

Recently I started to build a map-based app where I wanted to show a map with map images as an overlay. For example, if I have an image for a specific area I want to show it on the map in the app.

The way to do that is to use GroundOverlayOptions. and just use the image and the bounding box for the image.

var description = BitmapDescriptorFactory.FromBitmap(bitmap);
 
var overlay = new GroundOverlayOptions();
overlay.PositionFromBounds(new LatLngBounds(new LatLng(south,west), new LatLng(north,east)));
overlay.InvokeImage(description);
 
mapView.AddGroundOverlay(overlay);

Ok, that was pretty simple. But my problem was that the image I wanted to use was very in very high resolution (about 5000 x 9000 px). If you have developed Android app for a while you probably know that Android is no so good at handling high-resolution images. This is not a problem related to Xamarin, it is in the Android operating system. You often get out of memory exception or as in my case the BitmapFactory just returned null when I tried to decode the image stream.

One solution could be to just compress the image by setting InSampleSize. Setting InSampleSize to 2 will make the image half the size, and setting it to 4 will make it four times smaller and so on.

var options = new BitmapFactory.Options();
options.InSampleSize = 2;
 
var bitmap = BitmapFactory.DecodeStream(stream,null, options);

I had to set InSampleSize to 4 to get it to work, but the problem then was that the I could no longer read the text in the image because of lower quality.

What I had to do was to splice the image into smaller pieces. Android will handle memory better for multiple smaller images than one big. To read just a specific area of an image into memory we can use BitmapRegionDecoder. But first, we need to know the dimension of the full image so we can calculate how the dimension for one piece should be. To do that we use the regular BitmapFactory, but we send in an options object with InJustDecodeBounds set to true. It means it will just read the bounds of the image, then we can access height and width by the OutHeight and OutWidth of the options object.

var options = new BitmapFactory.Options();
options.InJustDecodeBounds = true;
 
BitmapFactory.DecodeStream(stream,null, options);
 
//How many rows and columns the original images should be split in. Set it 4 makes it splice 16 small images
var split = 4;
 
//Calculate the width and height for one image
var width = options.OutWidth / split;
var height = options.OutHeight / split;
 
var regionDecoder = BitmapRegionDecoder.NewInstance(stream, true);

Now when we now the width and height of one piece we need to split the original image and put them together in a 4x4 grid and overlay them on the map.

var positionX = 0;
var positionY = 0;
 
//Calculate the distance for one image slice.
 var lng =  (east - west)/split;
var lat = (north - south) / split;
 
var opt = new BitmapFactory.Options();
 
//Loop through all columns and rows to add images/overlays to the map
for (var x = 0; x < split; x++)
{
     positionX = width * x;
     var w = west + lng * x;
 
     var e = w + lng;
 
     for (var y = 0; y < split; y++)
     {
          positionY = height * y;
          var n = north - lat * y;
 
          var s = n - lat;
 
          //Get the bitmap for this image piece 
          var bitmap = regionDecoder.DecodeRegion(new Android.Graphics.Rect(positionX, positionY, positionX+width, positionY+height), opt);
 
          var description = BitmapDescriptorFactory.FromBitmap(bitmap);
 
          var overlay = new GroundOverlayOptions().PositionFromBounds(new LatLngBounds(new LatLng(s,w), new LatLng(n,e)));
          overlay.InvokeImage(description);
 
          map.AddGroundOverlay(overlay);  
     }
}