Xamarin.forms: Android Buttons shows ripple effect only on the upper left area of the button on Samsung devices when changing/setting the buttons background color

[ZwaanBanaan]

Android Buttons shows ripple effect only on the upper left area of the button on Samsung devices when changing/setting the buttons background color

Steps to Reproduce

1. Place a button in your layout.
2. Set the buttons background color.
3. Run your app on a Samsung device
4. Press the button.

Expected Behavior

Butten should highlight with normal ripple effect

Actual Behavior

Highligh with ripple only appears in the left upper part of the button.

Basic Information

• Version with issue: 2.5.0.2805555 & 2.6.0.251661(nightly build)
• Last known good version: -
• IDE: Visual Studio 2017

• Platform Target Frameworks:

  • Android SDK: 8.1

• Android Support Library Version: 27.02

• Using appcompatactivity
• Nuget Packages: -
• Affected Devices: Samsung Galaxy, Samsung Galaxy Tab (S2) with Android 7, did not test on different android versions.

Screenshots

Reproduction Link

ButtonText.zip

[jbowmanp1107]

Any update on this issue? Surprising this issue is holding up a release for us. This also seems to happen when just setting the CornerRadius as well. Can confirm this happens on Galaxy S6 as well.

[rpkwv8]

I am also encountering this (Samsung Note 8). This did not occur on version 2.5.0.122203. On Version 2.5.0.280555, it appears slightly above and to the left of the button, roughly half in/half out of the boundaries of the button. I tried out 2.5.1.392594-pre3 today and I get the same results as the initial post's screenshot. It occurs when I press the button, which triggers a background color change, and drag off of the button. It goes away when the button returns to it's original unpressed background color.

[Minneth]

This does seem specific to Samsung devices. You can get around it by removing the background colour. If you still need a coloured button, you'll currently have to create a custom renderer and add a tint.

[PaulVrugt]

As this did not happen in 2.5.0.122203, this seems to be a regression. Can someone add the correct label?

[TheRealBlip]

Experiencing the same regression with both background / border colors on Samsung XCover 3/4 devices.
Creating a custom renderer and adding a tint is not an acceptable solution.

[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.

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

[rodrigotristany]

somebody found a solution?

[leeanpeng]

Is there any workaround ?

[albernazf]

Did anybody find a solution? I'm experiencing same issue with all Samsung devices

[standamikes]

I did it through a custom renderer. This is my workaround, so it might not cover all your styling of the button. However, it will remove the broken ripple effect on Samsung devices.

https://gist.github.com/standamikes/4aa9a84dd6a05ac953269808b8be0a6c

[Dtyrell]

Thank you standamikes, that solution works for me and has allowed me to greatly improve the look and feel of my android apps. I would really like to be able to work out solutions like that myself but it appears I need more native android knowledge in order to do so.

[Dtyrell]

I did it through a custom renderer. This is my workaround, so it might not cover all your styling of the button. However, it will remove the broken ripple effect on Samsung devices.

https://gist.github.com/standamikes/4aa9a84dd6a05ac953269808b8be0a6c

Unfortunately after further investigation I have discovered a couple of issues with this solution.

If using a MvxAsyncCommand from the button which awaits a user action e.g a confirmation alert, the button background disappears for the duration of the await.

If a property on the button is changed, eg the border colour, using bindable properties the fix breaks and the button is re-rendered in the same broken style as it was before the fix.

[praveenBaruri]

Same issue here.... Any solutions or plugins to solve this issue?

[brzezinol]

Xamarin team, will it be fixed? Especially on samsung devices.
Bcause I don't know what should I plan with it.

[Frekvens1]

Can confirm this happens on Samsung Galaxy Tab 4 as well.

[PureWeen]

FYI the new material button doesn't exhibit this behavior on Samsung
https://github.com/xamarin/Xamarin.Forms/pull/4967

If you want to try using that instead

[LucaZiegler]

Same on Galaxy Note 8. Please fix it!

[sebikrt]

Still reproducible. This is still open. Is there planned any soon fix for this?

[PauchardThomas]

Still reproducible; Samsung Galaxy A3. Help

[Maxallica]

Still reproducible with SAMSUNG Galaxy Tab A6.

Xamarin.Forms: 3.5.0.129452
Xamarin.Android.Support.Annotations: 28.0.0.1
Xamarin.Android.Support.Compat: 28.0.0.1
Xamarin.Android.Support.Core.UI: 28.0.0.1
Xamarin.Android.Support.Design: 28.0.0.1
Xamarin.Android.Support.Fragment: 28.0.0.1
Xamarin.Android.Support.Media.Compat: 28.0.0.1
Xamarin.Android.Support.v4: 28.0.0.1
Xamarin.Android.Support.v7.AppCompat: 28.0.0.1
Xamarin.Android.Support.v7.CardView: 28.0.0.1
Xamarin.Android.Support.v7.MediaRouter: 28.0.0.1
Xamarin.Android.Support.v7.RecyclerView: 28.0.0.1

[gitbash-basher]

This is my workaround for this issue.

1. Create a custom renderer and use this for android.
   https://gist.github.com/gitbash-basher/8ec4220131743d7d7eefcebee9e3890c

2. Then add this to Android/Resources/drawable
   https://gist.github.com/gitbash-basher/f2bd1219f87de2f80c372c065910d2b1

[ChrisTTian667]

Same on Samsung XCover 4.

[xXdRaGoNrIdDeRXx]

Issue still exists with material design

[langtu]

Issue from years ago. I dont understand why xamarin team could not fix it.

[canmrt]

I also have the issue on Samsung's Galaxy S8+ - android 8.0.0.

[contrix09]

Issue still present. Samsung Tab S3 - Android 9.0.

[PureWeen]

@xXdRaGoNrIdDeRXx what device are you testing on? I've used the material button with a Samsung s8 and s9 and they both ripple

[xXdRaGoNrIdDeRXx]

Samsung J3, Samsung S5, Samsung S6

[PureWeen]

@xXdRaGoNrIdDeRXx can you create a new issue related to material button and with your project attached? I've tested material buttons with a few samsung phones and for me they all ripple.

The thing about the materialbutton is that it's almost 100 percent handled by the native material button written by android whereas the non material button is written by us

so if Material Button isn't rippling for you then that's going to be an upstream issue for google that might be fixed by android x

if you can test the material button with native android and see if that ripples for you

[xXdRaGoNrIdDeRXx]

I cannot upload my project that it is doing it due to NDA issues with my company, but when i get back to work i will test a small project to see if it is an issue.

[xXdRaGoNrIdDeRXx]

also ripple works fine on any phone other than samsung phones we test with

[xXdRaGoNrIdDeRXx]

ranging from android 6.x to 9.0

[jlzapata]

I have the same issue in Samsung Galaxy Note 5.

[PureWeen]

@jlzapata can you test with a material button? https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual

[xXdRaGoNrIdDeRXx]

Using latest XF 4.1.0.618606, The regular buttons using Visual="Material" are working fine, but ImageButtons using Visual="Material" has this defect. My guess is there is no such thing as a material imagebutton, and still uses the legacy broken renderer.

<ImageButton x:Name="btnContacts" Grid.Column="1" Source="ic_action_contacts" BackgroundColor="#4C4C4C" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="50" HeightRequest="45" Padding="10, 0, 10, 0" Visual="Material" Command="{Binding NavigationCommand}" CommandParameter="Contacts"/>

Tested on Samsung Galaxy S6 SM-G920W8 running android 7.0

[xXdRaGoNrIdDeRXx]

ImageButtons are still broken

[njdwklopper]

2019, September... This is STILL an issue. How?
To help, test on Samsung devices. It seems to be the common pattern.

[Syed-Esqimo]

The issue seems to be on Samsung devices running below Android 9. Such as Galaxy S7 running on Android 8.0 @PureWeen @davidortinau @pauldipietro. Please guys if there is a workaround plus solution address the issue and update this github issue. This is Microsoft backed team, this is unacceptable.

[xXdRaGoNrIdDeRXx]

@davidortinau, @PureWeen, @pauldipietro, Is there going to be a fix for the ImageButton? Is it going to get a material renderer? Fix for the non material button?

[xXdRaGoNrIdDeRXx]

<ImageButton x:Name="btnContacts" Grid.Column="1" Source="ic_action_contacts" HorizontalOptions="CenterAndExpand" WidthRequest="35" Visual="Material" Command="{Binding NavigationCommand}" CommandParameter="Contacts"/>

still has issue with latest Xamarin forms / visual.material: 4.3.0.991221

[PureWeen]

@xXdRaGoNrIdDeRXx Yes, we have some more material work scheduled for the road map and getting ImageButton over to material will be one of the first things we do.

[sthewissen]

I have the same thing happening but fixed it using the following renderer. What this does is create a new background drawable with the existing drawable's properties for border, corners, colors etc. When pressed it sets -0.05 luminosity on the background color, making it a little bit darker. It's not a ripple, but it's something.

https://gist.github.com/sthewissen/2f54227793c8a512fefae6b779d18b28

[marc-four]

Still reproducible: Samsung Galaxy A3 2017 (A320FL).

[BabaDorin]

:( Same. Galaxy S7 Edge

[VollRahm]

Having Trouble with this right now on Samsung Galaxy S7. It works with a Custom Renderer but then there is no animation. When i manually make a animation changing properties the Button gets this weird Ripple again. @sthewissen Renderer is a good workaround for this.

[xXdRaGoNrIdDeRXx]

has there been any direction on this?

[breenbob]

Typically, my client uses exclusively Samsung devices. So I've taken the gist published by @sthewissen as a starting point and modified it to use a RippleDrawable. In my app, I have lots of different types of buttons including ones that I don't want to show a ripple on and can't subclass to target selectively. So I've implemented this as an IVisual - add the empty RippleButtonVisual class to your shared project, add the ripple button renderer to your Droid project, and add the following style attribute to the buttons you selectively want to apply the ripple to:
Visual="RippleButtonVisual"

Looks like this for me:

[chaoyebugao]

Year 2020 is going to an end, problem still exists...

[Cfun1]

@PureWeen I can confirm it is still happening on Samsung devices running Android 8.0.0, but not with Visual="Material" , any progress/work on this since ?