Bug 58140 - Button with border radius not drawn correctly on Android or UWP
Summary: Button with border radius not drawn correctly on Android or UWP
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.4
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: bryan costanich
Depends on:
Reported: 2017-07-13 17:07 UTC by John Hardman
Modified: 2017-07-14 08:38 UTC (History)
4 users (show)

Tags: BorderRadius, BorderWidth, Android, UWP, Button, ac
Is this bug a regression?: ---
Last known good build:

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report for Bug 58140 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description John Hardman 2017-07-13 17:07:22 UTC
Using Xamarin.Forms

Wanted a circular button, with a solid color but no text or image.

The logical thing to do, if button is 40x40, is to set BorderRadius=20, BorderWidth=20, and set colors as appropriate.

            Button btnOutputPageDividerButton = new Button
                HeightRequest = 40,
                BorderRadius = 20,
                BorderWidth = 20,
                BorderColor = Color.Lime,
                WidthRequest = 40,
                FontSize = 0,
                Text = string.Empty,
                HorizontalOptions = LayoutOptions.Start,
                Margin = 0,
                BackgroundColor = Color.White,
                TextColor = Color.Black,
                VerticalOptions = LayoutOptions.Start

On iOS, this does what you would expect - a solid lime circular button.

On Android, the result is a solid white square.
On UWP, the result is a clipped, lime oval, with white in the middle.
Comment 1 Paul DiPietro [MSFT] 2017-07-13 21:36:08 UTC
Which version of Android are you using if you don't mind my asking? I do see a solid lime circle on my Android 6.0 emulator with that code (running against the 2.3.5-pre6 build), but the UWP circle is as you describe. I'll set to confirmed for now just based on the differences until we can look into it further, but any more info from you is appreciated.
Comment 2 John Hardman 2017-07-14 08:38:54 UTC
For Android, I am testing on a physical device - a Samsung Galaxy J5 running Android 6.0.1

One thought - I am assuming that the border width is inside the border radius (so, if the border radius is 20, and the border width were 5, the border would appear from 0->4 and 35->39 (as happens on iOS), rather than the border width being outside the radius or centered on the radius. I've never seen that documented. It would be good if that could be documented at https://developer.xamarin.com/api/property/Xamarin.Forms.Button.BorderRadius/ and https://developer.xamarin.com/api/property/Xamarin.Forms.Button.BorderWidth/