How to create a round or circle button in Xamarin.Forms

This article explains how to create a circle button in Xamarin.Forms.

How to create a round button in Xamarin.Forms

You can create a circle button by using the BackgroundColor and CornerRadius properties that are used to make the rounded edges in Xamarin.Forms button.

The following code example shows how to use background instantiate a circle button

<button:SfButton Text="Circle Button" BackgroundColor="DarkGreen" BorderColor="Maroon"
                 CornerRadius="60" HeightRequest="110" WidthRequest="110" BorderWidth="2" />

The following image shows the result of the code.

How to create a circle button using the background image

You can also create a round button by using the properties of BackgroundImage and CornerRadius.

The following code example shows how to create a circle image button in Xamarin.Forms

<button:SfButton BackgroundImage="CircleButton.png" CornerRadius="50" BorderWidth="0"
                 WidthRequest="100" HeightRequest="100" />

How to create a circle button with custom content

The Content property is used to add any view inside the button. The following code example shows how to add a custom view inside of a circle button.

<button:SfButton BackgroundColor="Transparent" BorderWidth="0" CornerRadius="50" HeightRequest="100" WidthRequest="100">
    <button:SfButton.Content>
        <Image Source="CircleButton.png" />
    </button:SfButton.Content>
</button:SfButton>

The following image shows the result of the code.

See Also:

How to create a simple button

Customize the button’s visual through visual states