Agfdhyk

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

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.