Aphire Aphire - 9 days ago 6
Android Question

Border being ignored on Android - Xamarin.Forms

I am attempting to build a circular button with a green border using Xamarin.Forms, using a method that I have used on previous projects by adding a BorderRadius, BorderColour etc values to the Button element.

Please consider the following code:

Button goButton = new Button
{
Text = "GO!",
TextColor = Color.White,
FontSize = 75,
HeightRequest = 200,
WidthRequest = 200,
BorderRadius = 100,
BorderWidth = 10,
BorderColor = Color.Green,
BackgroundColor = Color.Red
};


The above code gives me the following, undesired output:

enter image description here

I have tried re-writing in XAML and had the same issue, I have also checked that my version of Xamarin (and NuGet Xamarin.forms packages) are up to date. However on the iOS version, everything looks correct (first time for everything I suppose!)

Any assistance in finding the problem and fixing this issue would be greatly appreciated.

Suggested Edit:

Please find below my styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>

<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>

<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>

<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->

<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>

<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>

<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>

<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>

<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
</style>

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>

</resources>

Answer

Bordered Buttons work fine for me... maybe try some more reasonable values:

Button button = new Button {
    BorderWidth = 1,
    BorderColor = Color.Green,
    BackgroundColor = Color.Transparent,
    Text = "GO!",
    TextColor = Color.White,
}

That is all I have in my Buttons and the border shows up ok. Wondering if the BackgroundColor = Color.Transparent will make a difference for you.

*Edit: Adding comment as answer. According to this post, adding a completely empty custom renderer for the Button may help:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(GenericButtonRenderer))]

namespace Express.CustomRenderers {
    public class GenericButtonRenderer : Xamarin.Forms.Platform.Android.ButtonRenderer { }
}