How can I show the snackbar without hiding it while showing the soft keyboard?

[cat0363]

Entry and Button are placed on the screen, and when the Button is pressed, I want to check the input
and display a message with Snackbar if the Entry is empty. This is fine when the soft keyboard is not
visible, but when the soft keyboard is visible the snackbar is hidden behind the soft keyboard.

If possible, I don't want to:

1. Force hide the soft keyboard.
2. Specify the Snackbar anchor.

Because when the Entry is empty, I want to explicitly assign focus to it and display a warning message with the Snackbar.

Currently, the snackbar is hidden behind the soft keyboard as shown below.

If possible, I would like to display it above the soft keyboard.

The screen capture is the execution result by Android.

If you have any good ideas, please let me know. thank you.

[VladislavAntonyuk]

it's not answering your question with snackbar, but maybe such implementation will suits better your needs: https://stackoverflow.com/questions/49006331/validation-in-xamarin-using-dataannotation

In terms of priority, keyboard has higher visual priority then snackbar.
You can use anchor to display snackbar close to other control. maybe add some invisible component above the entry and use it as anchor. in that case snackbar should be displayed above the keyboard

[cat0363]

Hi, @VladislavAntonyuk

Thank you for your reply.
Message display by Validation was not listed as a candidate because it requires a new area for message display.
I think it's a good idea. Before using Snackbar, I used Toast, but I changed my policy to use Snackbar because
the background color didn't work and the number of lines in the message was limited.

As you suggested, before posting this question, I also tried creating a new class that inherits from ContentPage,
adding a transparent component to the top of the page, and using that as the Snackbar's anchor. It sometimes
doesn't work well due to the number of lines in the message, and it requires a certain amount of white space
from the top of the page, so I was looking for a better way.

If Entry and Button are placed in ScollView and Entry is specified as the anchor of Snackbar, when Entry is scrolled
to the top of the screen, Snackbar overlaps the title bar and the message is not displayed correctly.

In this case, it would be preferable if the Snackbar itself shifted its display position according to its own size, but
this was not the case. Because of this, using certain components such as input fields, select fields, etc. as anchors
is problematic.

Ideally, the Snackbar should appear at the bottom of the page when the keyboard is not visible, and above the
keyboard when the keyboard is visible. Until I find a solution, I'd like to work around this by having a transparent
component at the top of the page.

Your ideas were very helpful. Thank you very much.

[pictos]

@cat0363 how that works on iOS?

[pictos]

Thanks, I'm asking because there's an issue, on .net maui, around the soft keyboard on android devices, so if that works as expected on iOS probably is because that issue

[cat0363]

Hi, @pictos
Sorry for the late reply. I finally got a Mac mini and was
able to check it on iOS. iOS had the same result as Android.
Snackbars are hidden behind the software keyboard.

Below is a capture. (iOS 16.3)

The bottom part of the software keyboard is slightly red,
and the snackbar is displayed there.

[pictos]

@VladislavAntonyuk is it a bug or it is by design?
If it's a bug, @cat0363 can you open a bug issue for it? Please add the screenshots and if possible the project that you're using to reproduce the issue.

[VladislavAntonyuk]

We display Snackbar on view controller.
The best option would be using Anchor for the Snackbar or just hide keyboard

[cat0363]

Hi, @VladislavAntonyuk, @pictos
Thank you for your reply.
I was thinking about how to use Snackbar to display a warning message when checking an input field.
Because of this, I used to display a warning message after giving focus to the field with the error.
I used Toast in Xamarin.Forms and it worked fine, but due to message length constraints I switched to Snackbar.

Using an anchor is a workaround, but the anchor will display the Snackbar over the input field.
Is it possible to prevent the position of this snackbar from covering the input field?
Also, are there any points to note when displaying the snackbar by specifying the anchor?
If the message to be displayed is long, does part of it disappear if there is an input field at the top of the screen?

[VladislavAntonyuk]

On iOS it is limited to 10 lines. On Android you shouldn’t see any issues.

[cat0363]

@VladislavAntonyuk
Thank you for the information about the Snackbar maximum row count.
Currently, the anchor is displayed so as to cover the input field.
In Xamarin.Forms, Snackbar did not cover input fields.
Is there a way to display the input field without covering it with a
snackbar, like in Xamarin.Forms?

[CliffAgius]

Closed as answered