Toast and SnackBar CornerRadius

[jrahma]

Hi,

Please add CornerRadius to the Toast and SnackBar to set the radius for the corners

CornerRadius="0,25,0,25"

Thanks

[Tommigun1980]

Hi.

The SnackBar looks good on Android (as it's using the native component), but on iOS something like this is sorely missing. The fully square notification on iOS doesn't really look production ready. Considering that a corner radius is probably not applicable on all platforms, how about adding some corner rounding on iOS without necessarily making it user adjustable? The fully square iOS notification clearly is lacking some visual polish so this is just my suggestion for a quite quick fix that would have a large impact.

Thank you.

[jfversluis]

Yeah this will be an interesting challenge. Like you say, on Android natively it looks better as it is a native control. Not sure if we can actually change these settings there?

So, if we want to implement a property like this, then it will work for all platforms besides Android maybe? Which is not great.

Would it help if we made the look more consistent out of the box? Or you really want to have that control over the corner radius?

[jfversluis]

Also @jrahma as indicated in the other issue, please fill out the template as much as possible. Not doing so will result in the issue being closed in the future. We have the templates there for a reason, we'd love for you to think with us a little bit on the implementation and how you want to use it.

[VladislavAntonyuk]

For the one hand we can manually implement Android instead of using Google implementation. For the other hand it would be nice if other platforms (at least Apple) implement it.

[maxkoshevoi]

@VladislavAntonyuk Native Android SnackBar has margin, corner radius, shadow, both dark and white themes, and "swipe to dismiss". I think it's better to use native one for Android

[VladislavAntonyuk]

@maxkoshevoi I don't like that native implementation has only 1 snackbar action button. it is the only 1 reason why I am voting for the custom implementation. as for the CornerRadius, I believe it is pretty simple to add (similar to the Padding property).

[maxkoshevoi]

native implementation has only 1 snackbar action button

This is by design: https://material.io/components/snackbars#anatomy

[VladislavAntonyuk]

But all other platforms display multiple action buttons, so we get inconsistency between different platforms.
some customers prefer native experience, while others choose consistency across all platforms.

[VladislavAntonyuk]

I will try to find a way to inject an action button in the snackbar layout.

[Tommigun1980]

My two cents is to always go for the native implementation when one exists, as it's probably one of the main reasons to use Xamarin.Forms/MAUI over "framebuffer solutions" like Flutter.

So in this case I think that the Android implementation should definitely be native, but all relevant properties should preferably be exposed. Then "emulate" it on unsupported platforms like iOS. The iOS snack bar message looks quite out of place atm. as it's just a pure rectangle, so exposing the corner radius (etc.) settings on Android and implementing them on iOS is imho the best way to go.

Imho it results in the best experience -- a familiar control on Android where the control is natively supported, and a somewhat customisable emulated version on iOS.

[maxkoshevoi]

all other platforms display multiple action buttons

Could you please give an example (screenshot) of a mobile app with 2+ snackbar actions? I'm interested of how they would fit and be clearly separated. Are other mobile platforms put them on the second row?
(I'm not interested in desktop here since it has much more space to work with)

[VladislavAntonyuk]

all other platforms display multiple action buttons

Could you please give an example (screenshot) of a mobile app with 2+ snackbar actions? I'm interested of how they would fit and be clearly separated. Are other mobile platforms put them on the second row?

(I'm not interested in desktop here since it has much more space to work with)

https://user-images.githubusercontent.com/33021114/117999189-44058c00-b34d-11eb-91c7-bb3bee0f94c6.png

For iOS we use UIStackView as a container. We can replace it with any other container which will automatically adjust the components positions

[Cfun1]

@VladislavAntonyuk wouldn't be easier that the dev achieve that with the existing Popup control?

[maxkoshevoi]

@VladislavAntonyuk I meant native SnackBar. Your screenshot doesn't look like it adheres to any kind of style guide.
SnackBar is not customizable for a reason. It's just meant to notify user about some progress being done. That's it. It's better to not overcomplicate that UI.

I think if iOS doesn't have native SnackBar, it should exactly copy Android's one (like suggested by @Tommigun1980) as it's already has a great well documented, and thought through design. Let's not reinvent the wheel here.

[Tommigun1980]

Hi.

I think that this is actually a pretty high priority feature request. The iOS SnackBar (and probably Toast, haven't tested) looks really out of place as it's just a large rectangle. If #1425 was implemented (i.e. corner radius etc. were exposed), and the iOS "emulated" rendering updated to support it I think the component would become a lot more usable on iOS. The rectangle on iOS is so placeholder looking right now that it'd be hard to use it in a production app.

Also, another high priority fix for iOS is #1225 -- i.e. ability to dismiss the notifications by swiping them away.

The SnackBar/Toast components are so useful but unfortunately lacking on iOS atm. and I'd be absolutely thrilled if they received a small pass to get the iOS versions up to par.

Thank you!!

[VladislavAntonyuk]

Ok, I will create a PR tomorrow.

[VladislavAntonyuk]

Can we close this issue?

[pictos]

Closing the issue❣