Using SVGs in Xamarin.Android
Fragmentation is often cited by developers as one of the most problematic parts of developing for Android. With thousands of different combinations of screen resolutions and pixel densities, dealing with optimally sized images for several of these can become a real pain. Thankfully, SVGs come to the rescue.
Coming from a Windows Phone/.NET background, I used vector graphics a lot in my apps via XAML’s Path element, which you can export from Expression Design. In the majority of apps, I try to make sure there are no non-vector images at all, except where absolutely necessary like those needed for application bars and app tiles. Even so, the number of screen resolutions is pretty small in comparison to Android so if you do use images it isn’t such a big deal.
Arriving on Android, I was disappointed to find that although the SDK contains what appeared to be a similar Path class existed, I couldn't find a single person that was using it to support vectors.
Google’s documentation has scant references to vector graphics but thanks to some wonderful third party efforts, namely Android-SVG and it’s fork SVGAndroid, SVGs are supported. They work wonderfully and save the tedious task of making png/jpg assets in lots of different files size/resolutions.
Both of these third-party libraries are blessed with pretty solid documentation but I chose to use SVGAndroid as it builds off Android-SVG which hasn’t been updated in quite a while. I also found SVGAndroid to be far less picky about where you make your files and supports SVGs exported from the opensource Inkscape amoungst others.
In order to use a .JAR library in a Xamarin.Android project, it is necessary to create a Java Bindings Library. For many popular libraries there are bindings out there that have been created by fellow devs but again I found those for SVGAndroid were a bit out of date so I built my own which is available here. Thankfully, the binding process was easy and no extra code or transformations were needed.
Adding the .DLL outputted by building this library to your project then allows you to use it as any other Android dev would with a .JAR.
Unfortunately, I couldn't get the library to work when added to a layout in XML (mentioned in the docs) so it was necessary to make a quick ImageControl that could be added in such a way and supplied with an SVG path. The code for this as follows:
The code above, adds an SVGImageView to the layout and also sets the image source (from the app’s Assets folder) programmatically (ImageControl.Source = ….) or via a custom attribute. The attribute for this control is as follows:
Now that the code is in place and the custom attribute is set up we can use the control in layout files like so:
The line mentioned at the top auto-substitutes your package name and is necessary in order to add your custom attribute, you’ll need to add this to the pages root Linear or Relative Layout. The other thing to note is to declare the full namespace, not just the name of your control.
And there we have it.
Using this control means it is possible to create rich, graphical layouts (like this from Foundbite’s Pinpoint app for Android which only features vector images) and the package size of your application will be a lot smaller as a result. You also won’t have to spend an inordinate amount of time creating and scaling pngs. That’s a win in my book.
Feel free to reach out if you have any questions: james@foundbite.co.
