Xamarin.Forms Custom Label

Today, I am creating another new post in which I am going to tell you how to customize the Label in Xamarin.Forms. So, let's start.

We will first create a class with a name as "CustomLabel" and then, we will write a code in C #.

1. public class CustomLabel : Label  
2.   {  
3.       public static readonly BindableProperty CurvedCornerRadiusProperty =  
4.             BindableProperty.Create(  
5.                 nameof(CurvedCornerRadius),  
6.                 typeof(double),  
7.                 typeof(CustomLabel),  
8.                 12.0);  
9.   
10.       public double CurvedCornerRadius  
11.       {  
12.           get { return (double)GetValue(CurvedCornerRadiusProperty); }  
13.           set { SetValue(CurvedCornerRadiusProperty, value); }  
14.       }  
15.   
16.       public static readonly BindableProperty CurvedBackgroundColorProperty =  
17.           BindableProperty.Create(  
18.               nameof(CurvedCornerRadius),  
19.               typeof(Color),  
20.               typeof(CustomLabel),  
21.               Color.Default);  
22.   
23.       public Color CurvedBackgroundColor  
24.       {  
25.           get { return (Color)GetValue(CurvedBackgroundColorProperty); }  
26.           set { SetValue(CurvedBackgroundColorProperty, value); }  
27.       }  
28.   }  

Now, we can write some code in Android project for setting the radius and background color.

1. [assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]  
2. namespace XYZApp.Droid  
3. {  
4.     public class CurvedLabelRenderer : LabelRenderer  
5.     {  
6.         private GradientDrawable _gradientBackground;  
7.         protected override void OnElementChanged(ElementChangedEventArgs<Label> e)  
8.         {  
9.             base.OnElementChanged(e);  
10.             var view = (CustomLabel)Element;  
11.             if (view == null) return;  
12.             // creating gradient drawable for the curved background  
13.             _gradientBackground = new GradientDrawable();  
14.             _gradientBackground.SetShape(ShapeType.Rectangle);  
15.             _gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());  
16.   
17.             // Thickness of the stroke line  
18.             _gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());  
19.   
20.             // Radius for the curves  
21.             _gradientBackground.SetCornerRadius(DpToPixels(this.Context,  
22.                 Convert.ToSingle(view.CurvedCornerRadius)));  
23.   
24.             // set the background of the label  
25.             Control.SetBackground(_gradientBackground);  
26.         }  
27.         //Px to Dp Conver  
28.         public static float DpToPixels(Context context, float valueInDp)  
29.         {  
30.             DisplayMetrics metrics = context.Resources.DisplayMetrics;  
31.             return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);  
32.         }  
33.     }  
34. }  

Then, we will create the same in iOS project also.

1. [assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]  
2. namespace XYZApp.iOS  
3. {  
4.     public class CurvedLabelRenderer : LabelRenderer  
5.     {  
6.         protected override void OnElementChanged(ElementChangedEventArgs<Label> e)  
7.         {  
8.             base.OnElementChanged(e);  
9.             if (e.NewElement != null)  
10.             {  
11.                 var _xfViewReference = (CustomLabel)Element;  
12.                 this.Layer.CornerRadius = (float)_xfViewReference.CurvedCornerRadius;  
13.                 this.Layer.BackgroundColor = _xfViewReference.CurvedBackgroundColor.ToCGColor();  
14.             }  
15.         }  
16.     }  
17. }   

Now, again, please make sure to add a view reference.....
xmlns:local="clr-namespace:CustomLabelApp"
Then, write the XAML code in main page.

1. <StackLayout Padding="20">  
2.             <control:CustomLabel FontSize="14.5"  
3.                                       CurvedBackgroundColor="#6DB040"  
4.                                       TextColor="White"  
5.                                       Text="Custom Label"  
6.                                       HorizontalOptions="FillAndExpand"  
7.                                       CurvedCornerRadius="16"  
8.                                       HeightRequest="40"  
9.                                       VerticalTextAlignment="Center"  
10.                                       HorizontalTextAlignment="Center"/>  
11.             <Label Text="Simple Label"   
12.                HeightRequest="40"  
13.                VerticalTextAlignment="Center"   
14.                BackgroundColor="Gray"  
15.                HorizontalTextAlignment="Center"/>  
16.         </StackLayout>  

You should have your Custom Label working!!
Features of CustomLabel controls

1. Custom Curved Background Color Property=(CurvedBackgroundColor="#24C4FF")
2. Custom Curved Corner Radius Property=(CurvedCornerRadius="4")

For complete source code
https://github.com/xamarinskills/CustomLabelApp