Xamarin.forms: Xamarin.forms 2.5.0.280555 and android circle button issue

Created on 17 Feb 2018  路  7Comments  路  Source: xamarin/Xamarin.Forms

Bug report best practices: https://github.com/xamarin/Xamarin.Forms/wiki/Submitting-Issues

Description

Updated to new xamarin.forms nuget package and we have some issue regarding button on android. please see attached image.

XAML:

<Button
                Grid.Row="2"
                BackgroundColor="Red"
                CornerRadius="32"
                BorderWidth="0"
                Clicked="DoEnd"
                FontFamily="FontAwesome"
                FontSize="36"
                HeightRequest="64"
                HorizontalOptions="Center"
                Rotation="135"
                Text="{Binding Source={x:Static theme:UXFontIcons.FAPhone}}"
                TextColor="White"
                VerticalOptions="Center"
                WidthRequest="64" />

ButtonRenderer on Android:

```
[assembly: ExportRenderer(typeof(Button), typeof(FlatButtonRenderer))]
namespace SampleTest.Droid
{
public class FlatButtonRenderer : ButtonRenderer
{
Dictionary CustomFontsDictionary = new Dictionary()
{
{ "FontAwesome", "fontawesome-webfont.ttf" },
{ "Lato", "latoRegular.woff" },
{ "Lato Hairline", "latoThin.woff" }
};

public FlatButtonRenderer(Context context) : base(context)
{
}

protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
    base.OnElementChanged(e);

    if (this.Control != null && this.Element != null)
    {
        var nativeButton = (Android.Widget.Button)Control;
        nativeButton.SetShadowLayer(0, 0, 0, Android.Graphics.Color.Transparent);

                         nativeButton.Elevation = 0;
        if (this.CheckIsCustomFont())
        {
            var typeFace = this.GetTypeFace();
            var typeFaceStyle = this.GetTypeFaceStyle();
            if (typeFace != null)
            {
                nativeButton.SetTypeface(typeFace, typeFaceStyle);
            }
        }
    }
}

bool CheckIsCustomFont()
{
    string fontFamily = this.Element.FontFamily;
    if (string.IsNullOrWhiteSpace(fontFamily))
    {
        return false;
    }

    return CustomFontsDictionary.ContainsKey(fontFamily);
}

Typeface GetTypeFace()
{
    string fontFamily = this.Element.FontFamily;
    return Typeface.CreateFromAsset(this.Context.Assets, CustomFontsDictionary[fontFamily]);             
}

TypefaceStyle GetTypeFaceStyle()
{
    if (this.Element.FontAttributes == FontAttributes.None)
    {
        return TypefaceStyle.Normal;
    }

    if (this.Element.FontAttributes == FontAttributes.Bold)
    {
        return TypefaceStyle.Bold;
    }

    if (this.Element.FontAttributes == FontAttributes.Italic)
    {
        return TypefaceStyle.Italic;
    }

    return TypefaceStyle.Normal;
}

}
```

Steps to Reproduce



    1. 2.
  1. 3.

Expected Behavior

Circle button

Actual Behavior

slightly rectangular button (please see attached image)

Basic Information

Screenshots


androidbuttonissue

Reproduction Link

regression Android bug

Most helpful comment

What happened to the philosophy of not making changes that break existing code?
I don't care what default buttons do on Android, I want a my XAML layouts to look consistent across iOS and Android, I don't want to have to add a 'platform specific' setting to every button just to get rid of some arbitrary default padding.
If I set Padding="0" I expect there to be no padding, pure and simple.

All 7 comments

I too had the same issue. Button Height is not changing even if we set Height Request to a value.

While it's good that Xamarin (finally) tries to honour the Button class BorderRadius and BorderWidth on Android, the implementation is seriously broken.

In the image below (from 2.5.0.280555) the buttons should fill the grey box and be round - on Android the size is wrong and the border is not round.
The Android button also has what appears to be a shadow at the bottom although this may be an artefact of the incorrect border shape.

xamarin

[Android] the new version(2.5.0.280555) added some padding for the button.

It did. That was intentional because default Android buttons have that padding, and we want all of your buttons to look as similar as possible. #1935 will add a platform specific that you can use to remove that default padding.

What happened to the philosophy of not making changes that break existing code?
I don't care what default buttons do on Android, I want a my XAML layouts to look consistent across iOS and Android, I don't want to have to add a 'platform specific' setting to every button just to get rid of some arbitrary default padding.
If I set Padding="0" I expect there to be no padding, pure and simple.

What happened to the philosophy of not making changes that break existing code?

Thats why its a platform specific. We have to assume that the old padding behavior is the expected behavior for existing code.

@philmoz Are you setting Padding = 0 in a custom renderer or in the Android styles? The Xamarin.Forms Button doesn't have a Padding property, so I just want to be clear about what settings you're using for your buttons. Thanks :)

Was this page helpful?
0 / 5 - 0 ratings