Xamarin.Forms issue with button with border? - xamarin

Question

I have this button:
<Button x:Name="btnNext" BorderWidth="2" BorderColor="#96AF5B" BorderRadius="4"
WidthRequest="110" HeightRequest="25" Padding="0" VerticalOptions="Center" HorizontalOptions="Center"
BackgroundColor="#FFFCFF" FontSize="Default"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,Factor=0.5, Constant=-55}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=videoPlayer,Property=Height,Factor=0.85, Constant=12.5}" FontFamily="verdana"
Clicked="Next_Clicked"/>
in Android, it shows a little square at the top left side of the button when tapped, this also happens when using a frame instead of setting the button's border properties.
here's a gif:
https://i.stack.imgur.com/FGv5j.gif

Answer 1

Actually, this bug has been around for a while now if I am not wrong we started facing this issue around somewhere in mid of March and it has been there ever since.
If you check Bugzilla there are a ton of bugs that have been logged for all the issues that people are facing because of this:
https://bugzilla.xamarin.com/show_bug.cgi?id=58140
https://bugzilla.xamarin.com/show_bug.cgi?id=42351
https://bugzilla.xamarin.com/show_bug.cgi?id=60248
https://bugzilla.xamarin.com/show_bug.cgi?id=60392
So I went out and devised a workaround which seems to be working fine for us using Label and Stack layout with some customized changes:
public class CustomButton: Label
{
public static readonly BindableProperty CommandProperty =
BindableProperty.Create("Command", typeof(ICommand), typeof(CustomButton), null);
public static readonly BindableProperty CommandParameterProperty =
BindableProperty.Create("CommandParameter", typeof(object), typeof(CustomButton), null);
public event EventHandler ItemTapped = ( e, a ) => { };
public CustomButton()
{
Initialize();
}
public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
}
public object CommandParameter
{
get { return GetValue(CommandParameterProperty); }
set { SetValue(CommandParameterProperty, value); }
}
private ICommand TransitionCommand
{
get
{
return new Command(async () =>
{
AnchorX=0.48;
AnchorY=0.48;
await this.ScaleTo(0.8, 50, Easing.Linear);
await Task.Delay(100);
await this.ScaleTo(1, 50, Easing.Linear);
Command?.Execute(CommandParameter);
ItemTapped(this, EventArgs.Empty);
});
}
}
public void Initialize()
{
GestureRecognizers.Add(new TapGestureRecognizer
{
Command=TransitionCommand
});
}
}
I have also added a little animation so it gives the feel for a button.
Then use this Label as follows:
<StackLayout BackgroundColor="Black" Padding="1"> // Here padding will be the border size you want and background color will be the color for it
<nameSpace:CustomButton XAlign="Center" BackgroundColor="Blue" /> //Height and Width request is mandatory here
</StackLayout>
The only problem with this solution is that you cannot add border-radius.