Xamarin.forms: Styling a button causes the click effect to break

[Nessitro]

Description

Button works fine without a style but when i add a style that affects it's visual appearance, the click animation goes to the top left corner with a weird squared shape instead of the usual "shadow spreading from click point"

Steps to Reproduce

1.In App.xaml's ResourceDictionary, add

        <Style x:Key="StyleBtn" TargetType="Button">
            <Setter Property="Text" Value="I'm Broken" />
            <Setter Property="BorderColor" Value="Lime" />
            <Setter Property="BorderRadius" Value="5" />
            <Setter Property="BorderWidth" Value="5" />
            <Setter Property="WidthRequest" Value="200" />
            <Setter Property="TextColor" Value="Teal" />
        </Style>

2.MainPage

<StackLayout>
    <Button Style="{StaticResource StyleBtn}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>

Expected Behavior

a styled button with it's normal click effect

Actual Behavior

a styled button with a squared-like effect after click that positioned in the top left corner

Basic Information

• Version with issue: above Xamarin.Forms 2.5.x.xxxx (updating forms version by version causes some build issue but i tried latest pre & stable version(3.x.x.xxxx)
• Last known good version: with Xamarin.Forms 2.4.0.91020
• IDE: Visual Studio 2017 15.7.1
• Platform Target Frameworks:
  
  
  
  • iOS: Not Tested
  
  
  • Android: android:minSdkVersion="19" android:targetSdkVersion="27"
  
  
  • UWP: Not Tested
  
  
• Android Support Library Version: 27.0.2
• Nuget Packages: Xamarin.Forms
• Affected Devices:

Android Devices in general, but only tested on Galaxy J3 Pro

Screenshots

https://imgur.com/a/9Lm2z9J

[pauldipietro]

I don't seem able to reproduce this on 8.0 and 7.1 emulators with the latest prerelease so perhaps it's only affecting specific devices.

[SamuelRule]

@pauldipietro I have come across this issue I came to github to raise it. There is no issue on simulator I only get the Issue on a physical device. It's not to do with style its when you are adding a background color to a button. Creating a new blank forms app and adding a button with a background color to MainPage.xaml has this issue.

The issue is caused when you press the button and drag your finger outside the bounds of the element or release.

Found on Pixel, Galaxy S8. Galaxy S7 and huawei P20 Pro

Just give me a shout if you need more info :)

[erdemyavuzyildiz]

I have the same annoying issue, only top left part of the buttons have the ripple effect.
For the user, it definitely feels like the application is broken or buggy.

Yes, the issue is only detectable on a real device. Simulator does not have the issue.

Phone is Samsung Galaxy Note-8: SM-N920C Android 7.0-API 24

[samhouts]

Duplicate of #2096

[afsalt-optimus]

@pauldipietro I have come across this issue I came to github to raise it. There is no issue on simulator I only get the Issue on a physical device. It's not to do with style its when you are adding a background color to a button. Creating a new blank forms app and adding a button with a background color to MainPage.xaml has this issue.

The issue is caused when you press the button and drag your finger outside the bounds of the element or release.

Found on Pixel, Galaxy S8. Galaxy S7 and huawei P20 Pro

Just give me a shout if you need more info :)

Do you have any solution for this issue?

@pauldipietro I have come across this issue I came to github to raise it. There is no issue on simulator I only get the Issue on a physical device. It's not to do with style its when you are adding a background color to a button. Creating a new blank forms app and adding a button with a background color to MainPage.xaml has this issue.

The issue is caused when you press the button and drag your finger outside the bounds of the element or release.

Found on Pixel, Galaxy S8. Galaxy S7 and huawei P20 Pro

Just give me a shout if you need more info :)

Do you have any solution for this issue?