locked
Circle button in Xamarin.Forms. Super easy way RRS feed

  • Question

  • User63369 posted

    Guys, there is super easy way to create Circle/Round buttons in XF. What you need to do is to use BorderRadius, WidthRequest and HeightRequest (you must use all these properties) Make in mind simple formula: WidthRequest = BorderRadius * 2 HeightRequest = BorderRadius * 2

    or another way: BorderRadius = WidthRequest / 2 BorderRadius = HeightRequest / 2

    So finally, if your WidthRequest and HeightRequest both are equals 40, then your BorderRadius will be 20. See the attached screens for this simple and nice hack :)

    simple text:

    font awesome:

    Tuesday, May 2, 2017 7:59 PM

All replies

  • User180523 posted

    Do you have a way to do that in pure markup without doing the calculations in C# or at design time?

    Tuesday, May 2, 2017 8:14 PM
  • User63369 posted

    Yeah, forgot to mention, that in my case I've used XAML: Button WidthRequest="40" HeightRequest="40" BorderRadius="20"

    And of course this can be also done in C#

    Tuesday, May 2, 2017 8:17 PM
  • User63369 posted

    Also this can be done as custom control, aka CircleSimpleButton :) with some predefined sizes, aka small, medium, large, or custom (define explicitly)

    Tuesday, May 2, 2017 8:23 PM
  • User74754 posted

    Android and UWP work too?

    Tuesday, May 2, 2017 8:27 PM
  • User63369 posted

    Currently was testing that only on iOS and Android. It seems that was working without issues. I need make some more tests on different OS versions and with FormsAppCompatActivity

    Tuesday, May 2, 2017 8:32 PM
  • User180523 posted

    If one were to use the technique to make a customcontrol that would then be dynamic in its sizing (self re-sizing) to the space giving to it by its parent container, then it becomes worthwhile. But I don't hardcode sizes on anything.

    Tuesday, May 2, 2017 8:33 PM
  • User63369 posted

    Make sense, this control can be implemented as auto-scale (self re-sizing, etc.), but not for now :)

    Tuesday, May 2, 2017 8:36 PM
  • User76049 posted

    @Alezhuk

    I do like posts like this that show how you can use the framework to do tricks (prefer that to hack) like this.

    A small project attached might help some people who are not aware of these properties.

    Tuesday, May 2, 2017 9:04 PM
  • User63369 posted

    @NMackay That is great idea with samples. I'm thinking of sharing a repo or implement custom control.

    Tuesday, May 2, 2017 9:13 PM
  • User74754 posted

    With a bindable property radius :)

    Tuesday, May 2, 2017 11:18 PM
  • User318788 posted

    Hey @Alezhuk Can you please, please, please share the sample code?

    I tried with all properties as mentioned, however the button is not appearing circle.

    Will the following code only do the trick?

     <Button Text="Z" WidthRequest="40" HeightRequest="40" BorderRadius="20"></Button>
    

    Please suggest.

    Thanks N Baua

    Wednesday, June 7, 2017 9:16 AM
  • User318788 posted

    Okey Got it,

    < Button Text="" WidthRequest="60" HorizontalOptions="Center" HeightRequest="60" BackgroundColor="Aqua" BorderColor="Red" BorderRadius="30" Image="_btnCamera.png" Grid.Row="0" Grid.Column="0" />

    Though couldn't get the Red border, however happy with the result.

    Regards, Nhilesh Baua

    Wednesday, June 7, 2017 10:18 AM
  • User312280 posted

    @Alezhuk It's not working in Android.. Here is the code

    <Button WidthRequest="60" HeightRequest="60" BorderRadius="30" HorizontalOptions="Center" VerticalOptions="Center"/>

    Saturday, June 10, 2017 4:52 AM
  • User63369 posted

    @Sahadev_Gupta Can you share some more source code? In what layout your button is wrapped? Also please share the screen to see what is shown.

    Thursday, July 27, 2017 9:12 PM
  • User129392 posted

    I've created this control based on project developed by James montemagno. Maybe it can be useful for you https://www.nuget.org/packages/Plugins.Forms.ButtonCircle

    this work fine in Android and iOS

    Thursday, July 27, 2017 11:54 PM
  • User318788 posted

    @WilsonVargas said: I've created this control based on project developed by James montemagno. this work fine in Android and iOS

    Looks Great,
    Update docs and replicate on GitHub as well. That gives you better wings. :smile: Best of luck

    N Baua

    Friday, July 28, 2017 3:31 AM
  • User129392 posted

    @N_Baua said:

    @WilsonVargas said: I've created this control based on project developed by James montemagno. this work fine in Android and iOS

    Looks Great,
    Update docs and replicate on GitHub as well. That gives you better wings. :smile: Best of luck

    N Baua

    This plugin is on Github actually, for more information about documentation see: https://github.com/wilsonvargas/ButtonCirclePlugin

    Friday, July 28, 2017 4:00 PM
  • User76049 posted

    @Alezhuk

    This came in very handy thanks.

    I had to do some comps that had a rounded background that had to change colour based on some rules and the label code inside had to change, same approach works nicely with a frame as well.

    <Frame Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" HeightRequest="30" WidthRequest="30" BackgroundColor="#FFFFFF" HasShadow="False" OutlineColor="Transparent" Padding="0" CornerRadius="15" VerticalOptions="Center" Margin="0,0,8,0"> <Frame.Triggers> <DataTrigger TargetType="Frame" Binding="{Binding OrderDetails.OrderStatus}" Value="Normal"> <Setter Property="BackgroundColor" Value="{StaticResource OrdStatusNormal}" /> </DataTrigger> <DataTrigger TargetType="Frame" Binding="{Binding OrderDetails.OrderStatus}" Value="Urgent"> <Setter Property="BackgroundColor" Value="{StaticResource OrdStatusUrgent}" /> </DataTrigger> <DataTrigger TargetType="Frame" Binding="{Binding OrderDetails.OrderStatus}"> <Setter Property="BackgroundColor" Value="{StaticResource OrdStatusOther}" /> </DataTrigger> </Frame.Triggers> <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="0"> <Label Text="{Binding OrderDetails.OrderStage}" TextColor="#FFFFFF" Margin="0" Style="{StaticResource DataLabelStyle}" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand"> </Label> </StackLayout> </Frame> Bit messy as I just pulled it together and it has a fixed height which isn't ideal but it does the job for now, might try and make a control for it if I get a chance.

    Works in iOS and Android fine.

    Monday, August 7, 2017 4:10 PM
  • User63369 posted

    @NMackay That is awesome.

    Friday, December 8, 2017 11:25 PM
  • User363905 posted

    Unfortunately this have zero effect in Android, still a simple rectangle:

    <Button Text="+" FontAttributes="Bold" FontSize="Large" WidthRequest="40" HeightRequest="40" BorderRadius="20" BorderWidth="2" BorderColor="Black"/>

    It's in a ListView.Footer. No matter if i put a StackLayout around or not.

    Saturday, January 13, 2018 4:29 PM
  • User139568 posted

    @SahadevGupta @NBaua this happens because you are probably using FormsAppCompatActivity @Alezhuk ´s only works on android if your activity inherits from FormsApplicationActivity FormsAppCompatActivity applies Google´s Material Design´s ripple and elevation effect on button using a type of background which the Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer doesn´t handle well.

    So, or your activity inherits from FormsApplicationActivity or add the extremely simple renderer below if you need to continue using FormsAppCompatActivity

    ``` using Android.Runtime; using Opp.Mobile.Forms.Core; using System; using Xamarin.Forms;

    [assembly: ExportRenderer(typeof(Button), typeof(FlatButtonRenderer))] ///

    /// Created for enabling border radius and border color /// public class FlatButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer {} ```

    Cheers

    Saturday, January 13, 2018 11:59 PM
  • User284706 posted

    @AhmedAlejo that was exactly my problem. Strangely, I had started out with FormsApplicationActivity (so the rounded corners were working just fine) and then, at some point, inadvertently changed to FormsAppCompatActivity and wondered what the heck had happened. Now I know, thanks to you!

    Saturday, February 3, 2018 6:38 PM
  • User139568 posted

    @JohnTolle actualluy this is a actually Xamarin.Forms bug. Since using FormsAppCompatActivity causes breaking changes of things that used to work.

    Monday, February 5, 2018 2:27 PM
  • User76049 posted

    Worked fine with FormsAppCompatActivity in Forms 2.4.0. I moved on to another job so never had a chance to test with Forms 2.5.0.

    Monday, February 5, 2018 8:28 PM
  • User155041 posted

    its better to use custom renderer regardless of compatibility

    Tuesday, February 6, 2018 5:06 AM
  • User176749 posted

    Using frame doesnt work on UWP. any idea why?

    Friday, March 30, 2018 2:18 PM
  • User367915 posted

    In case of the button inside a grid cell, it is required to set VerticalOptions="Center" and HorizontalOptions="Center". xml <Button WidthRequest ="100" HeightRequest ="100" BorderRadius ="50" VerticalOptions ="Center" HorizontalOptions="Center" BackgroundColor ="Blue" Grid.Row ="1" Grid.Column ="0" />

    Thursday, April 26, 2018 1:21 AM
  • User371148 posted

    Hi @Alezhuk,

    Does this work on WPF integrated with Xamarin.forms CrossPlatform?

    Monday, August 20, 2018 10:08 AM
  • User323726 posted

    i'm facing problem in corner radius property of button , i'm using mac machine and it not accept corner radius property of button but when i use windows operating system it accepted and no error show ?

    have any one solution for that?

    Saturday, September 22, 2018 7:10 AM
  • User330867 posted

    @Ashish_sharma said: i'm facing problem in corner radius property of button , i'm using mac machine and it not accept corner radius property of button but when i use windows operating system it accepted and no error show ?

    have any one solution for that?

    What do you mean? Do you get an error? A screenshot would be helpful

    Saturday, September 22, 2018 3:49 PM
  • User323726 posted

    Thank's For Reply i have not screen shot, i use mac machine and create a demo page in this page i use button control and it not show corner radius property in this control , but when i use windows os like window 10 and same thing to create a demo page and use button control and see property then it show me corner radius property. why ths hap[pen i don't know. using Visual studio 2017.

    Friday, October 5, 2018 10:19 AM
  • User317293 posted

    I'm a little late to the discussion but I have tried the following and is working properly for me on Android under the last version of Xamarin.Forms:

    <Button x:Name="btnNext" Text="&gt;" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="{Binding Width, Source={x:Reference btnNext}}" CornerRadius="{Binding Width, Source={x:Reference btnNext}}" Command="{Binding NextMediaCommand}"/>

    Here are some Screenshots:

    Thursday, December 3, 2020 1:43 AM