Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ZwaanBanaan opened this issue Mar 14, 2018 · 43 comments

Comments

@ZwaanBanaan
Copy link

@ZwaanBanaan ZwaanBanaan commented Mar 14, 2018

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

bugscreenshotsamsunggalaxyxamarin

Reproduction Link

ButtonText.zip

@pauldipietro pauldipietro added this to New in Triage Mar 14, 2018
@ZwaanBanaan ZwaanBanaan changed the title Android Buttons shows ripple effect only on the upper left area of the button on Samsung devices Android Buttons shows ripple effect only on the upper left area of the button on Samsung devices when changing/setting the buttons background color Mar 14, 2018
@StephaneDelcroix StephaneDelcroix moved this from New to Ready For Work in Triage Mar 14, 2018
@jbowmanp1107

This comment has been minimized.

Copy link

@jbowmanp1107 jbowmanp1107 commented Mar 21, 2018

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

This comment has been minimized.

Copy link

@rpkwv8 rpkwv8 commented Mar 22, 2018

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 comment has been minimized.

Copy link

@Minneth Minneth commented Jun 4, 2018

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

This comment has been minimized.

Copy link

@PaulVrugt PaulVrugt commented Jun 4, 2018

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

@TheRealBlip

This comment has been minimized.

Copy link

@TheRealBlip TheRealBlip commented Jun 6, 2018

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

This comment has been minimized.

Copy link

@erdemyavuzyildiz erdemyavuzyildiz commented Jun 17, 2018

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

This comment has been minimized.

Copy link

@rodrigotristany rodrigotristany commented Jul 31, 2018

somebody found a solution?

@leeanpeng

This comment has been minimized.

Copy link

@leeanpeng leeanpeng commented Sep 5, 2018

Is there any workaround ?

@samhouts samhouts removed this from Ready For Work in Triage Oct 15, 2018
@albernazf

This comment has been minimized.

Copy link

@albernazf albernazf commented Nov 5, 2018

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

@standamikes

This comment has been minimized.

Copy link

@standamikes standamikes commented Dec 5, 2018

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

This comment has been minimized.

Copy link

@Dtyrell Dtyrell commented Dec 5, 2018

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

This comment has been minimized.

Copy link

@Dtyrell Dtyrell commented Jan 3, 2019

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

This comment has been minimized.

Copy link

@praveenBaruri praveenBaruri commented Jan 10, 2019

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

@brzezinol

This comment has been minimized.

Copy link

@brzezinol brzezinol commented Jan 10, 2019

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

@Frekvens1

This comment has been minimized.

Copy link

@Frekvens1 Frekvens1 commented Jan 20, 2019

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

@PureWeen

This comment has been minimized.

Copy link
Contributor

@PureWeen PureWeen commented Feb 1, 2019

FYI the new material button doesn't exhibit this behavior on Samsung
#4967

If you want to try using that instead

@LucaZiegler

This comment has been minimized.

Copy link

@LucaZiegler LucaZiegler commented Feb 2, 2019

Same on Galaxy Note 8. Please fix it!

@sebikrt

This comment has been minimized.

Copy link

@sebikrt sebikrt commented Feb 18, 2019

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

@PauchardThomas

This comment has been minimized.

Copy link

@PauchardThomas PauchardThomas commented Feb 25, 2019

Still reproducible; Samsung Galaxy A3. Help

@Maxallica

This comment has been minimized.

Copy link

@Maxallica Maxallica commented Feb 26, 2019

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 comment has been minimized.

Copy link

@gitbash-basher gitbash-basher commented Mar 18, 2019

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

This comment has been minimized.

Copy link

@ChrisTTian667 ChrisTTian667 commented Mar 26, 2019

Same on Samsung XCover 4.

@xXdRaGoNrIdDeRXx

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented Apr 15, 2019

Issue still exists with material design

@xamarin xamarin deleted a comment from sebikrt Apr 15, 2019
@langtu

This comment has been minimized.

Copy link

@langtu langtu commented Apr 17, 2019

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

@canmrt

This comment has been minimized.

Copy link

@canmrt canmrt commented May 7, 2019

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

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented May 20, 2019

Issue still present. Samsung Tab S3 - Android 9.0.

@PureWeen

This comment has been minimized.

Copy link
Contributor

@PureWeen PureWeen commented May 20, 2019

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

@xXdRaGoNrIdDeRXx

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented May 20, 2019

Samsung J3, Samsung S5, Samsung S6

@PureWeen

This comment has been minimized.

Copy link
Contributor

@PureWeen PureWeen commented May 20, 2019

@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

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented May 20, 2019

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

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented May 20, 2019

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

@xXdRaGoNrIdDeRXx

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented May 20, 2019

ranging from android 6.x to 9.0

@jlzapata

This comment has been minimized.

Copy link

@jlzapata jlzapata commented Jul 4, 2019

I have the same issue in Samsung Galaxy Note 5.

@PureWeen

This comment has been minimized.

Copy link
Contributor

@PureWeen PureWeen commented Jul 6, 2019

@xXdRaGoNrIdDeRXx

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented Jul 25, 2019

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

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented Aug 20, 2019

ImageButtons are still broken

@njdwklopper

This comment has been minimized.

Copy link

@njdwklopper njdwklopper commented Sep 11, 2019

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

@Syed-Esqimo

This comment has been minimized.

Copy link

@Syed-Esqimo Syed-Esqimo commented Sep 27, 2019

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

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented Oct 11, 2019

@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

This comment has been minimized.

Copy link

@xXdRaGoNrIdDeRXx xXdRaGoNrIdDeRXx commented Dec 6, 2019

<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

This comment has been minimized.

Copy link
Contributor

@PureWeen PureWeen commented Dec 6, 2019

@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

This comment has been minimized.

Copy link
Contributor

@sthewissen sthewissen commented Jan 16, 2020

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

This comment has been minimized.

Copy link

@marc-four marc-four commented Jan 24, 2020

Still reproducible: Samsung Galaxy A3 2017 (A320FL).

@samhouts samhouts added the a/button label Feb 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.