It’s been a while since my last blog post. It’s vacation time and I’ve decided to postpone everything. I’d rather spend time on summer activities than working and coding.

Having that said, I’d like to write a short post about the usage of Vectors in Xamarin.Forms. I want to do it because I’ve implemented it recently and it’s worth sharing.

What are vectors?

The answer to this question will be very brief. Vectors are images that scale nicely. They are rather simple icons then complex images. Using vectors is good because you can have one file and it will cover different resolutions. No need to have 3 files on iOS and many on Android. One image to rule them all.
You can learn more by reading this Wiki page.

Vectors in Xamarin.Forms

In this post, I will focus on a simple solution. I won’t use any 3rd party libraries (FFImageLoading supports vectors). I assume your solution supports both iOS and Android. I will cover both. To begin with we need to add those vectors to your projects. Let’s go!

Xamarin.iOS

On iOS, you will need your vector to be in PDF format. You should be able to export your image to PDF in Figma/Zepplin/whatever-you-use. Let’s assume, you’ve managed to do it. Hence, you have a file that you want to add. Great!

Open assets in iOS project.

Assets in Xamarin.iOS

In the second step, you will need to create a new “Image Set”. To do that, tap green plus at the bottom of assets list.

It’s always a green button
Select “New Image Set”

Remember to name it properly.

Drag and drop your file to “Vector” in Universal section.

Place it in Vector slot

Of course, if you want this file to look different on iPhones and iPads then you need to drag it to the proper section. That’s it. Thus, iOS is ready!

Xamarin.Android

On Android, more actions are required. To begin with, you need your image to be in SVG format. In the second step, you need to go to this page and convert your SVG file to Android drawable. As a result of the conversion, you will get xml with vector and path.

Don’t need to understand it. Just copy it!

Copy it to your clipboard. Let’s go back to Visual Studio. Expand resources under the Android project and add new drawable.


Add new drawable

Name it same as the one that you’ve added on iOS.

Now, paste what you’ve copied. Save it. Done!

Consuming vectors in Xamarin.Forms.

But how to use this image in Xamarin.Forms page? Really easy. You can consume your vector in the same way as you use other images.

<Image Source="close_icon" HeightRequest="20" WidthRequest="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="40"/>

Voilá! It works!

Let’s go to the beach!

I hope you find this article useful. Using Vectors in Xamarin.Forms can save you time adding all resources and reduce your app size. Only benefits.

Now, let’s go and enjoy the summer! Obviously, summer is not for coding!

Leave a Reply

avatar