Xamarin.Forms: Hyperlink Label

Many a times we required a hyperlink label in mobile application. For example, you need to show "privacy or Terms and condition" as hyper link and clicking on it should open that link in browser. Unfortunately Xamarin.Forms does not have such in-built control. But it can be achieve using the powerful features called Custom Renderer. I will be going to show on how to create a Hyperlink label in this post.

This article assumes, that you know about Xamarin.Forms and have a basic understandings of Custom renders. if not familiar with this, i would suggest read through this: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/.

Lets dive into code now.
Create a new project of Xamarin.Forms (PCL/Shared).
Once you done creating a project, go to your PCL/Shared prject and create a class called "HyperlinkLabel" which should be inheriting from Xamarin.Form's "Label" control.

public class HyperlinkLabel : Label
{
   public HyperlinkLabel()
   {
   }
}

The definition of class is very simple. It inherited from Label control.

In your page where you want to show HyperLink, use following XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:Controls="clr-namespace:YourNameSpace"
             x:Class="YourNameSpace.YourPageName"
             Title="Hyperlink Label">
  <Grid Padding="10">
     
    <Controls:HyperlinkLabel Text="codementor.com" HorizontalOptions="Center" VerticalOptions="End" />
  </Grid>

</ContentPage>

Droid :
Now go to your Android project and create a new class called "HyperlinkLabelRenderer" like below;

using YourNameSpace.Droid;
using Android.Text.Util;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(HyperlinkLabel), typeof(HyperlinkLabelRenderer))]
namespace YourNameSpace.Droid
{
    public class HyperlinkLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            Linkify.AddLinks(Control, MatchOptions.All);

        }
    }
}

iOS :
Create class in your iOS project.

using YourNameSpace.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly:ExportRenderer(typeof(HyperlinkLabel),typeof(HyperlinkLabelRenderer))]
namespace YourNameSpace.iOS
{
    public class HyperlinkLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            Control.UserInteractionEnabled = true;

            Control.TextColor = UIColor.Blue;

            var gesture = new UITapGestureRecognizer();

            gesture.AddTarget(() =>
            {
                var url = new NSUrl("https://" + Control.Text);

                if (UIApplication.SharedApplication.CanOpenUrl(url))
                    UIApplication.SharedApplication.OpenUrl(url);
            });

            Control.AddGestureRecognizer(gesture);
        }
    }
}