Responsive Font Sizes using Xamarin.Forms

When developing a cross-platform application, it is common for us to target multiple form factors like Phones, Tablets, iPads etc. But in a Xamarin.Forms application we will define the control in a layout only once for all the targeted devices (iOS/Android/Windows Phone). There is no direct way to specify different font-sizes based on the form-factor/resolution of the devices. Hardly we can specify the font-size to a particular number which is common for all the devices and form-factors.
One simple way to fix this problem is to assign the device specific appropriate size in OnAppearing method by overriding it. 
Let us assume we have a Label in out Mainpage.xaml.

<Label Text="Large Text" x:Name="LargeLabel" />

Override OnAppearing() method and define platform-relative size to the control in that using Device Class’s GetNameSize method which returns appropriate size of that in that form-factor.

protected override void OnAppearing()
    this.LargeLabel.FontSize = Device.GetNameSize(NamedSize.Large, typeof(Label);

NOTE: Please feel free to drop a note if you find a better way of doing it. Thanks Alessandro for the tip!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s