0
votes

I´m looking to create the classic circular button on a ListView to add items. I´ve done that by using AbsoluteLayout just fine. But the problem I have is that I cannot make the Button to go with rounded border. No matter what I´ve set it just stays square. For what I´ve read it just seems that Xamarin overrrides the border behaviour. I cannot believe there is not a simple way to solve this.

Can anyone help me out with this?.

EDIT: I´ve tried https://github.com/wilsonvargas/ButtonCirclePlugin but I´m still getting the button with an erratic behaviour:

enter image description here

    <local:CircleButton 
        Text="+" 
        FontSize="Medium" 
        FontAttributes="Bold" 
        AbsoluteLayout.LayoutBounds="0.9,0.9,50,50" 
        AbsoluteLayout.LayoutFlags="PositionProportional" 
        HeightRequest="70" 
        WidthRequest="70"/>
2
@Jason see my edit - NicoRiff
I've create this plugin and It Works fine, check my answer pls. - Wilson Vargas

2 Answers

2
votes

This is a problem only in Android 6.0 but it is solved by adding the BorderRadius property and assigning it the same value as the height of the button. something like this:

<local:CircleButton Icon="ic_directions_bike" 
                        FontSize="30" TextColor="Black"
                        HeightRequest="70" WidthRequest="70" 
                        BorderRadius="70" BackgroundColor="#DCDCDC"/>
    <!--This button is not exactly circular-->
    <local:CircleButton FontSize="30" TextColor="Black" 
                        HeightRequest="70" WidthRequest="200" 
                        BorderRadius="20" BackgroundColor="#DCDCDC"/>

enter image description here

This property allows you to create buttons that are not exactly circular, as seen in the image.

0
votes

enter image description here

I can get the background button using Xamarin.Forms. If you are writing Xamarin.Forms you can try.

<StackLayout Orientation="Horizontal">
            <Image Margin="10,10" HeightRequest="50" WidthRequest="50" Source="backButton.png">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="btnSetting_Clicked"/>
                </Image.GestureRecognizers>
            </Image>
            <Image HorizontalOptions="EndAndExpand" Margin="0,0,10,10" HeightRequest="50" WidthRequest="50" Source="settingsButton.png">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="btnSetting_Clicked"/>
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>