Xamarin.Forms Custom Button

Today I am creating another new post in which I am going to show you how to customize the button, so let's start,

So we will first create a class whose name "CustomButtons" and then we will write a code in "C #"

1. public class CustomButton: Button  
2.     {  
3.          public static readonly BindableProperty CustomBorderColorProperty =  
4.            BindableProperty.Create(  
5.                nameof(CustomBorderColor),  
6.                typeof(Color),  
7.                typeof(CustomButton),  
8.                Color.Default);  
9.   
10.         public Color CustomBorderColor  
11.         {  
12.             get { return (Color)GetValue(CustomBorderColorProperty); }  
13.             set { SetValue(CustomBorderColorProperty, value); }  
14.         }  
15.   
16.         public static readonly BindableProperty CustomBorderRadiusProperty =  
17.              BindableProperty.Create(  
18.                  nameof(CustomBorderRadius),  
19.                  typeof(int),  
20.                  typeof(CustomButton),  
21.                  4);  
22.   
23.         public int CustomBorderRadius  
24.         {  
25.             get { return (int)GetValue(CustomBorderRadiusProperty); }  
26.             set { SetValue(CustomBorderRadiusProperty, value); }  
27.         }  
28.   
29.         public static readonly BindableProperty CustomBorderWidthProperty =  
30.              BindableProperty.Create(  
31.                  nameof(CustomBorderWidth),  
32.                  typeof(double),  
33.                  typeof(CustomButton),  
34.                  4.0);  
35.   
36.         public double CustomBorderWidth  
37.         {  
38.             get { return (double)GetValue(CustomBorderWidthProperty); }  
39.             set { SetValue(CustomBorderWidthProperty, value); }  
40.         }  
41.   
42.         public static readonly BindableProperty CustomBackgroundColorProperty =  
43.            BindableProperty.Create(  
44.                nameof(CustomBorderColor),  
45.                typeof(Color),  
46.                typeof(CustomButton),  
47.                Color.Default  
48.               );  
49.   
50.         public Color CustomBackgroundColor  
51.         {  
52.             get { return (Color)GetValue(CustomBackgroundColorProperty); }  
53.             set { SetValue(CustomBackgroundColorProperty, value); }  
54.         }  
55.     }  

Now we can write some code in Android project for rendering and setting the Border Color, Width, Radius and Background Color....

1. [assembly: ExportRenderer(typeof(CustomButton), typeof(CurvedCornersButtonRenderer))]  
2. namespace MyNewApp.Droid.CustomRenderer  
3. {  
4.     public class CurvedCornersButtonRenderer: ButtonRenderer  
5.     {  
6.         private GradientDrawable _gradientBackground;  
7.         protected override void OnElementChanged(ElementChangedEventArgs<Button> e)  
8.         {  
9.             base.OnElementChanged(e);  
10.             var view = (CustomButton)Element;  
11.             if (view == null) return;  
12.             Paint(view);  
13.         }  
14.    
15.  protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)  
16.         {  
17.             base.OnElementPropertyChanged(sender, e);  
18.             if(e.PropertyName ==  CustomButton.CustomBorderColorProperty.PropertyName ||  
19.                  e.PropertyName == CustomButton.CustomBorderRadiusProperty.PropertyName ||  
20.                  e.PropertyName == CustomButton.CustomBorderWidthProperty.PropertyName)  
21.             {  
22.              if (Element != null)  
23.                 {  
24.                     Paint((CustomButton)Element);  
25.                 }  
26.             }  
27.         }  
28.         private void Paint(CustomButton view)  
29.         {  
30.             _gradientBackground = new GradientDrawable();  
31.             _gradientBackground.SetShape(ShapeType.Rectangle);  
32.             _gradientBackground.SetColor(view.CustomBackgroundColor.ToAndroid());  
33.             // Thickness of the stroke line  
34.             _gradientBackground.SetStroke((int)view.CustomBorderWidth, view.CustomBorderColor.ToAndroid());  
35.             // Radius for the curves  
36.             _gradientBackground.SetCornerRadius(  
37.                 DpToPixels(this.Context,Convert.ToSingle(view.CustomBorderRadius)));  
38.             // set the background of the label  
39.             Control.SetBackground(_gradientBackground);  
40.         }  
41.   
42.        public static float DpToPixels(Context context, float valueInDp)  
43.         {  
44.             DisplayMetrics metrics = context.Resources.DisplayMetrics;  
45.             return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);  
46.         }  
47.     }  
48. }  

Then we do this:

1. [assembly: ExportRenderer(typeof(CustomButton), typeof(CurvedCornersButtonRenderer))]  
2. namespace MyNewApp.iOS.CustomRenderer  
3. {  
4.     public  class CurvedCornersButtonRenderer: ButtonRenderer  
5.     {  
6.         protected override void OnElementChanged(ElementChangedEventArgs<Button> e)  
7.         {  
8.             base.OnElementChanged(e);  
9.             var view = (CustomButton)Element;  
10.             if (view == null) return;  
11.             Paint(view);     
12.         }  
13.   
14.         protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)  
15.         {  
16.             base.OnElementPropertyChanged(sender, e);  
17.             if (e.PropertyName == CustomButton.CustomBorderRadiusProperty.PropertyName ||  
18.                e.PropertyName == CustomButton.CustomBorderColorProperty.PropertyName||  
19.                e.PropertyName == CustomButton.CustomBorderWidthProperty.PropertyName )  
20.             {  
21.                 if (Element != null)  
22.                 {  
23.                     Paint((CustomButton)Element);  
24.                 }  
25.             }  
26.         }  
27.         private void Paint(CustomButton view)  
28.         {  
29.             this.Layer.CornerRadius = (float)view.CustomBorderRadius;  
30.             this.Layer.BorderColor = view.CustomBorderColor.ToCGColor();  
31.             this.Layer.BackgroundColor = view.CustomBackgroundColor.ToCGColor();  
32.             this.Layer.BorderWidth = (int)view.CustomBorderWidth;  
33.         }   
34.     }  
35. }  

Now again please make sure to add view reference.....

xmlns:local="clr-namespace:CustomButtonApp" then write xaml code in main page.

1. <ContentPage.Content>  
2. <StackLayout VerticalOptions="StartAndExpand" Padding="20,5" Spacing="10">  
3.                 <customview:CustomButton x:Name="btnSignin"  
4.                                          CustomBorderColor="#24C4FF"  
5.                                          CustomBackgroundColor="#24C4FF"  
6.                                          Text="Log In" TextColor="White"  
7.                                          Clicked="btnSignin_Clicked"  
8.                                          CustomBorderRadius="4"  
9.                                          CustomBorderWidth="4"  
10.                                          VerticalOptions="Center"/>  
11.         </StackLayout>  
12.     </ContentPage.Content>  

You should have your CustomButton working!!

Features of CustomButton controls

1. Custom Border Color Property=(CustomBorderColor="#24C4FF")
2. Custom Background Color Property=(CustomBackgroundColor="#24C4FF")
3. Custom Border Radius Property=(CustomBorderRadius="4")
4. Custom Border Width Property=(CustomBorderWidth="4")

NOTE

SOURCE CODE

https://drive.google.com/open?id=1xpKWYbRY_I14UiCOc8LkFgJezSnjFuM8

In the new version Of Xamarin Studio or Visual Studio(4.7.10.38) you don't need to customize these properties, this property is working well in the new version (4.7.10.38).