Circle button in Xamarin.Forms. Super easy way

AlezhukAlezhuk USMember ✭✭
edited May 2017 in Xamarin.Forms

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:

Posts

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

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

  • AlezhukAlezhuk USMember ✭✭
    edited May 2017

    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#

  • AlezhukAlezhuk USMember ✭✭

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

  • DiogoLeaoDiogoLeao USMember ✭✭

    Android and UWP work too?

  • AlezhukAlezhuk USMember ✭✭
    edited May 2017

    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

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    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.

  • AlezhukAlezhuk USMember ✭✭

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

  • NMackayNMackay GBInsider, University mod

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

  • AlezhukAlezhuk USMember ✭✭

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

  • DiogoLeaoDiogoLeao USMember ✭✭

    With a bindable property radius :)

  • N_BauaN_Baua INMember ✭✭✭✭✭

    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

  • N_BauaN_Baua INMember ✭✭✭✭✭

    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

  • Sahadev_GuptaSahadev_Gupta INMember ✭✭✭

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

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

  • AlezhukAlezhuk USMember ✭✭

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

  • WilsonVargasWilsonVargas PEMember ✭✭

    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

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @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

  • WilsonVargasWilsonVargas PEMember ✭✭

    @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

  • NMackayNMackay GBInsider, University mod
    edited August 2017

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

  • AlezhukAlezhuk USMember ✭✭
    edited December 2017

    @NMackay That is awesome.

  • Greg_ruGreg_ru Member ✭✭

    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.

  • AhmedAlejoAhmedAlejo USMember ✭✭
    edited January 2018

    @Sahadev_Gupta @N_Baua 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))]
    /// <summary>
    /// Created for enabling border radius and border color
    /// </summary>
    public class FlatButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer {}
    

    Cheers

  • JohnTolleJohnTolle USMember ✭✭

    @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!

  • AhmedAlejoAhmedAlejo USMember ✭✭

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

  • NMackayNMackay GBInsider, University mod

    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.

  • CharwakaCharwaka INMember ✭✭✭✭✭

    its better to use custom renderer regardless of compatibility

  • batmacibatmaci DEMember ✭✭✭✭✭

    Using frame doesnt work on UWP. any idea why?

  • In case of the button inside a grid cell, it is required to set VerticalOptions="Center" and HorizontalOptions="Center".

    <Button
        WidthRequest     ="100"
        HeightRequest    ="100"
        BorderRadius     ="50"
        VerticalOptions  ="Center"
        HorizontalOptions="Center"
        BackgroundColor  ="Blue"
        Grid.Row         ="1"
        Grid.Column      ="0" />
    
  • Chand46Chand46 Member ✭✭

    Hi @Alezhuk,

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

  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    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?

  • amirvenusamirvenus USMember ✭✭✭

    @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

  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    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.

Sign In or Register to comment.