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);
  10. public Color CustomBorderColor
  11. {
  12. get { return (Color)GetValue(CustomBorderColorProperty); }
  13. set { SetValue(CustomBorderColorProperty, value); }
  14. }
  16. public static readonly BindableProperty CustomBorderRadiusProperty =
  17. BindableProperty.Create(
  18. nameof(CustomBorderRadius),
  19. typeof(int),
  20. typeof(CustomButton),
  21. 4);
  23. public int CustomBorderRadius
  24. {
  25. get { return (int)GetValue(CustomBorderRadiusProperty); }
  26. set { SetValue(CustomBorderRadiusProperty, value); }
  27. }
  29. public static readonly BindableProperty CustomBorderWidthProperty =
  30. BindableProperty.Create(
  31. nameof(CustomBorderWidth),
  32. typeof(double),
  33. typeof(CustomButton),
  34. 4.0);
  36. public double CustomBorderWidth
  37. {
  38. get { return (double)GetValue(CustomBorderWidthProperty); }
  39. set { SetValue(CustomBorderWidthProperty, value); }
  40. }
  42. public static readonly BindableProperty CustomBackgroundColorProperty =
  43. BindableProperty.Create(
  44. nameof(CustomBorderColor),
  45. typeof(Color),
  46. typeof(CustomButton),
  47. Color.Default
  48. );
  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. }
  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. }
  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. }
  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!!

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