Maui

Maui copied to clipboard

Is there an existing issue for this?

• [X] I have searched the existing issues

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

• [X] 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

When a Community Toolkit Snackbar is shown on Android Tablet and aligned vertically to the bottom of screen, it is mostly concealed by the bottom action bar. Please see image below (blue Snackbar).

This was observed on Android 13 tablet using .NET8 MAUI (8.0.3) & Community Toolkit MAUI 7.0.0.

Expected Behavior

The Snackbar should be displayed in the area assigned to the running App and not be concealed by elements outside the App.

Steps To Reproduce

Use the Snackbar on Android 13 when the bottom action bar has been enabled. Note: This is enabled by default when using the default 'tablet_h_dpi_13_5in' emulator provided by the Android SDK.

Link to public reproduction project repository

https://github.com/CommunityToolkit/Maui/tree/main/samples/CommunityToolkit.Maui.Sample

Environment

- .NET MAUI CommunityToolkit:7.0.0
- OS: Android 13
- .NET MAUI: 8.0.3

Anything else?

I have not included my own repro because this should be easily reproducible simply running any Community Toolkit example app that uses the snackbar. I linked to the source code here to allow this to be submitted.

After reviewing this issue in-depth, I found the issue actually exists, I'm sharing my findings below:

• The issue occurs only on Android 13 and 14. I tested on Android 11 and 10 as well, and on these versions there is no issue.
• The issue occurs only when the SnackBar is displayed from a modal page. This does not occur on normal content pages.
• The issue does not occurs on phones but only tablets.

Workarounds

• Add an empty/blank anchor element at the bottom of the page or in the position you would like to show the SnackBar on the page, and then display the SnackBar on that particular anchor (I tested this solution and it worked OK on modal pages as well). Snackbar.Make("Snackbar in a Modal Page",null, "OK",TimeSpan.FromSeconds(30), null, testLabel)
• Hide the navigation bar on the modal page.

Source

This appears to be the source file that shows a snackbar: \CommunityToolkit.Maui\Alerts\Snackbar\Snackbar.android.cs I am thinking that Android 13+ is setting the bar as translucent or something that is doing this. I found in the web same issue with other apps and native Android.