Creating a round button in Xamarin Forms

For a Xamarin Forms app I’m currently working on I wanted to have round buttons. This should normally be pretty easy, by defining a style in your App.xaml:

<Style x:Key="PrimaryButtonStyle" TargetType="Button">
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="BorderColor" Value="White" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="BorderWidth" Value="1" />
    <Setter Property="WidthRequest" Value="50" />
    <Setter Property="HeightRequest" Value="50" />
    <Setter Property="BorderRadius" Value="25" />

When you use this style for a button, it works great on iOS and the Universal Windows Platform, but it didn’t work on Android. The problem seems to be that our app inherits the new FormsAppCompatActivity. The included compatibility button renderer however ignores the BorderRadius property.

After searching for hours, the solution turned out to be pretty simple. By creating a custom button renderer and inheriting the default, it overrides the compatibility renderer and the round button works on Android:

[assembly: ExportRenderer(typeof(Button), typeof(Project.Droid.RoundButtonRenderer))]

namespace Project.Droid
    /// <summary>
    /// Overrides AppCompat problems with round buttons. Works like a charm!
    /// </summary>
    public class RoundButtonRenderer : ButtonRenderer
        protected override void OnDraw(Android.Graphics.Canvas canvas)

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)

Credits to the answer on Stack Overflow here:

Geef een reactie