Analog Watch with Xamarin.Forms and SkiaSharp

So I was looking at Matthew Leibowitz blog post:

https://blog.xamarin.com/drawing-with-skiasharp/

Then an idea came to my head... what a developer can do with a 2D cross platform drawing library?? I started to look for tutorials and material on this topic but I did not found much information about it so I got my hands on the library to create an Analog Watch using this library and Xamarin.Forms.

In order to use this library you'll have to install the following package on a Xamarin.Forms project:

Screen Shot 2017-02-19 at 18.17.09.png

So what are the Main concepts of using this library? you can use SKGLView or SKCanvasView inside any Xamarin.Forms layout to start drawing things the most simply ones like circles and lines or a little more complex ones like bezier curves or shaders even text!

The main purpose of this library can be resumed with this method:

_skiaView.PaintSurface += OnPainting;

This is where the magic happens:

On the code above I am Drawing a circle on the middle of the screen and 3 lines 1 foreach hand of the analog clock (second, minute and hour). and I rotate them according to the specific degree (6 degrees for each second and minute and 0.5 degrees for each second for the hour hand).

The only difference that I've found between SKGLView and SKCanvasView is that the GL view had a loop that is constantly updating the view (something like a video game loop) some of you may be familiar with this topic if you have used OpenGL before.

But you can achieve the same thing with a timer like the one I've used:

So what this is doing is getting the exact time (hour, minute and second) create the representation in degrees and drawing 3 lines that are going to rotate each second:

What do you think? Do you want to get your hands on this?

You can visit the skia web page to get more information of the library.
https://skia.org/

And from my side maybe you can come up with more crazy and simple ideas on what else you can do using skia sharp :) See you on the next post!

Mario Jesús Galván Miranda

I am a Mexican Mobile developer and a Xamarin Enthusiast.

Guadalajara