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 == nullreturn;  
  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 == nullreturn;  
  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:CustomButtonAppthen 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!!

If You want to watch related video click Here Custom Rendered Button

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

IN THE SOURCE CODE , ONLY HAVE CODE PLZ DOWNLOAD REFERENCE

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).

Next Recommended Reading Xamarin.Forms Floating Action Button