I have seen a lot of people asking about how to create circle buttons in Xamarin Forms. I read about a quick and easy way to create that circle button effect so I have decided to make this post to share it as a reference.
Let’s Start!
Let’s see the properties
There are two properties you can set to get this effect:
➖ CornerRadius
➖ BorderRadius (Deprecated since version Xamarin.Forms 2.5)
Both are bindable properties that take Integers and directly affect the roundedness of the button. For now, the example will be with the property CornerRadius, since BorderRadius has been deprecated.
Let’s see the example
To achieve the full circular shape though, we will have to take into consideration the following things:
➖ The first one is Make sure the WidthRequest and HeightRequest of the button are set to the same value, which would give us a square button
➖ The second thing is to have the CornerRadius set to half the length of a side from the square shaped button.
In this example, the BorderRadius value is 40. So, in this case: WidthRequest and HeightRequest values are 40 * 2 = 80.
And there you have it! The circle button is created. 💪
Spanish post:
https://medium.com/@reyes.leomaris/creando-botones-circulares-en-xamarin-forms-8f65b5540cd5
References:
https://forums.xamarin.com/discussion/94559/circle-button-in-xamarin-forms-super-easy-way
