Thursday, January 8, 2015

Using font icons in Xamarin.Android

One technique that I've found to make great looking icons in mobile applications is using SVG icons. Sites like IcoMoon and FontAwesome provide free and premium icons packaged as SVG graphics or true type fonts. The advantages of these icons over PNG images is that they are by nature resolution independent. Instead of having to include multiple copies in your project at different DPI levels, you can include a small ttf file and have access to the images you need at any resolution.

For my project, I needed a check mark (available), an 'X' (unavailable), as well as icons for refresh and calendar. I wandered over to icomoon.io and selected the icons using the icomoon app. From there I was able to download a custom font that included the icons as well as a demo webpage showing the character strings necessary to render them.

With the font downloaded, I added it to my Xamarin.Android projects /Assets folder.

Looking at the HTML file included with the zip download, I could see that the characters for my icons are using ea0f and ea10 for unavailable and available respectively.

In my list row adapter in the Xamarin.Android project, I defined these characters in a dictionary.

Finally, when defining the layout for the row, I loaded the font and set the character text and color according to the data. Reserved rooms have a red X and available rooms have a green checkmark.

Note that the line that is setting the text to e953 displays the separate calendar icon.

The rendered list appears below (unfortunately, it was a busy day to use real data, so no available rooms are shown)

This is cross-posted from the Anexinet Mobility blog

1 comment:

  1. How can we use the SVG versions of the Google Material Design Icons that are found at https://www.google.com/design/icons/ ?

    ReplyDelete