When creating a mobile app, we want it to look great. Not just by design but also typography great. Xamarin.Forms already provide custom font mechanism. But I don’t see it efficient enough because it has to be declared differently for each platform. Look at the example snippet below.
See that how for each platform it’s different string. On iOS, you just need to set font name. As for Android and WinPhone you need to declare path to font file and font name. All I want to do is to just call the font name like iOS does and for every platform it’ll render correctly like following snippet.
So in this tutorial, we’re going to create a helper class for Android version of Xamarin.Forms based on how iOS custom font works. You can see that they already post a blog post on how to use custom font in Xamarin.iOS. You just need to add your font to the project, define it under
info.plist. We’ll do something similar with custom font helper and custom renderers.
NOTE: This tutorial doesn’t cover WinPhone and UWP version because I’m not using Windows for development and more likely people just stick with iOS and Android. So I apologize for WinPhone and UWP developer you have to stick with Xamarin’s official guide.
Creating Custom Font Helper
Create a new Xamarin.Forms solution and let’s name it
CustomFont. Let’s go to Android project and create a new helper class called
FontManager. To make this object accessible from another class, let’s make it as a singleton class. We also need one dictionary object to store these fonts.
Then we need to create a function to register font file to font name. This function will have two parameters:
fontName as the name of the font and
fontPath as the font file location. We’re going to create a dictionary to store
Typeface objects with
fontName as the key. For those who don’t know,
Typeface is Android class used to define a custom font. This function should look like following snippet.
To make it simpler, we can also create a function that only use
fontPath as parameter and automatically guess the font name like following snippet.
With those functions, we can register as many fonts as we need. Now we need a function to get this font to use it on our controls. This one is very simple because we just need to look it up on our dictionary object. Also, if we couldn’t find any font name inside dictionary, we register it by assuming it is located under
Fonts directory (or maybe you can change it into throw exception).
Update! Code snippets are updated by moving
ChangeFont()functions from each renderers into centralized function in
Finally, we need to add function to change font for each controls. The 3 controls we’re going to use in this tutorial are derived from
Android.Widget.TextView class. We’ll set the font of the control by changing its Typeface. If the font family is not defined (null or empty string), we’ll set it to
Typeface.Default, which is the default typeface defined by Android.
Now that our
FontManager is completed and ready to use, we need to modify default Xamarin.Forms controls using
Creating Custom Renderers
For this tutorial, we’ll only create three custom renderer of Xamarin.Forms controls. They are
Button. All of them will have similar implementation which is font replacement happened inside
OnElementChanged events. These code snippets below are implementation in order of Button, Entry, and Label renderer.
As you can see that all three custom renderers look similar. All we need to care is to ensure that
Element properties are not
null, because we need them to change the native control’s font. Now that our custom renderers are ready, it’s time to use it in action.
See It in Action
Before we start using our new custom font helper, we need to download some fonts. You can get anything you want from Google Fonts Service. For this tutorial, I use two fonts: Oswald-Regular and Pangolin.
Add your fonts inside
Droid/Assets folder. Then register this fonts in
MainActivity.cs right above of
LoadApplication(new App()); with following snippets.
After our fonts are registered, we can use it on our Xamarin.Forms control. We can change the font by changing
FontFamily property with the name of the font and it’ll rendered perfectly on Android and iOS, without adding
OnPlatform selector. Here is an example UI I made with XAML:
When you run this on your Android device or emulator it should look like following image.
When you run it on iOS it’ll show the same font as Android does. So in case next time you want to change your control’s font, you can do it peacefully.
Once again we know that Xamarin.Forms’s API still isn’t perfect for every problems. But with custom renderers we can see how easily to add a feature we want. Thanks for reading this post.
You can download this complete solution on GitHub.
Fullscreen Video Background Control for Xamarin.Forms
How to play video as page background, like Spotify, using Xamarin.Forms with Android and iOS Custom Renderer