[regression/8.0.0-preview.6.8686] Button Click Ripple Effect Not Working In Android

[welcometochristown]

Description

The button click animation does not work in my Android app .Net8 for Maui, but does work in .Net7

Using the default project for both, only in .Net7 can I see the little fade animation when I press the button.

.net8

.net7

From what I have gathered the .net 7, the button's android platform view's background value is an instance of the RippleDrawable Class. And In the .net 8, it's an instance of the BorderDrawable Class.

Steps to Reproduce

Create Default Maui application (Using .Net 8)
Run default application on android.
Click counter button.

Link to public reproduction project repository

No response

Version with bug

8.0.0-preview.6.8686

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.0-preview.5.8529

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[drasticactions]

I believe this is a sideeffect of #15725, but I'm not sure if it's a bug or intentional.

The background color is set as part of the default MAUI styles, to a solid color. The newer behavior in main/net8.0 is to update the background brush with the correct brush style, which, I think, removes RippleDrawable, where before it would have just replaced the literal color on the same background type.

If you remove the default MAUI Styles (or just remove the ones for button) the ripple should return, since that background color is no longer being set. The default button used by MAUI is a MaterialButton which does include that effect by default, AFAIK.

@jsuarezruiz does this sound right? What do you think?

[welcometochristown]

I believe this is a sideeffect of #15725, but I'm not sure if it's a bug or intentional.

The background color is set as part of the default MAUI styles, to a solid color. The newer behavior in main/net8.0 is to update the background brush with the correct brush style, which, I think, removes RippleDrawable, where before it would have just replaced the literal color on the same background type.

If you remove the default MAUI Styles (or just remove the ones for button) the ripple should return, since that background color is no longer being set. The default button used by MAUI is a MaterialButton which does include that effect by default, AFAIK.

@jsuarezruiz does this sound right? What do you think?

@drasticactions Removing the BackgroundColor property in the default MAUI styles does indeed add back the ripple effect.

This does however mean that I can't use the BackgroundColor property on the button and instead used a handler to set the background color back to white.

#if ANDROID
            Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("WhiteBackground", (handler, view) =>
            {
                var button = view.Handler.PlatformView as AndroidX.AppCompat.Widget.AppCompatButton;
                button.SetBackgroundColor(Android.Graphics.Color.White);
            });
#endif

This obviously makes it a little tricky if I have many buttons that require different background colors.

[samhouts]

Confirmed that this regressed between 8.0.0-preview.5.8529 and 8.0.0-preview.6.8686. Like @drasticactions indicated, likely caused by #15725. We're now always setting the Drawable to the PaintDrawable instead of using the RippleDrawable.

[zippo227]

Avoiding the set of the background color hasn't helped me so far. Glad to see this is being worked on.

[bcaceiro]

This is actually important, since the effect from Touch is essential in ui/ux of mobile applications...

[DeepWorksStudios]

If you set an background to the button than the bug accures too in the lastest version 8.0.6

[adelmurad24]

Still not works with .net8, and yest works normally with .net7 ...............

[prabhavmehra]

I see the same issue for iOS as well.

[m1dst]

#18857 was closed as a dupe of this however that issue also mentioned padding issues and this issue does not. Please ensure the padding is also resolved as that is the part I'm interested in.

[lhfwc]

Same for us, paddings don't work on Android. As far as I can see avoiding "BackgroundColor" does not resolve the issue.