Snackbar layout looks different on iOS and Android

[raginmari]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

Snackbars on iOS and Android look different: while the Android snackbar extends to the left and right edges of the screen, the iOS snackbar "hugs" its contents horizontally so that its width varies depending on the content. This difference in layout is unnecessary from a technical point of view and may conflict with people's designs which often request parity on Android and iOS.

Expected Behavior

Snackbars on both iOS and Android follow the same layout strategy and extend to the left and right edges of the screen.

Steps To Reproduce

1. Open the solution of the reproduction sample
2. Launch the app for Android and iOS
3. Tap the button
4. Observe the snackbar layout

Link to public reproduction project repository

https://github.com/raginmari/MauiCommunityToolkitSnackbarIssue

Environment

- .NET MAUI CommunityToolkit: 9.0.0
- .NET MAUI: 8.0.40
- OS: iOS 17.2

Anything else?

In order to fix the iOS snackbar layout, the horizontal constraints here have to be adjusted.

The reproduction sample contains a workaround for iOS (see MainPage.xaml.cs) which can be used to fix the issue in the short term (note: it relies on implementation details and may break in the future).

I personally expect snackbars to look and layout like they do on Android and would like iOS to follow suit. But this may be a point of personal preference and others may prefer the way iOS layouts the snackbar. Either way, I think that snackbars (and other components) should look as similar as possible if technically feasible.

Moreover, it can be argued that some the layout should be configurable:

• should the snackbar "hug" its contents or extend to the edges?
• should the snackbar always and exclusively anchor above its AnchorView or should there be an option to anchor it below the view? Maybe even inside the view?
• should snackbars optionally fade in and out?
• and much more...

This issue is supposed to create parity between Android and iOS and is not intended to discuss the configurability of the snackbar feature.