dotnet / dotnet/maui

[Android] SafeAreaEdges not behaving as expected

Open
#33,922 10 comments 4 reactions 0 assignees View on GitHub
area-safearea s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

In my test repo I have a page with a series of `Entry` elements and at the bottom a button as well as some additional text. In a practical example this could be a register form with a register button always visible with the app version written below.

The desired experience is that when a user begins editing text that when the keyboard appears the bottom button would still be visible and all the text content would be accessible. To accomplish this I added `SafeAreaEdges="SoftInput"` to the `Grid` which contains the button. However trying `SafeAreaEdges="SoftInput"` on the `ContentPage` also does not do as expected, in some test cases it performed worse where the input `Entry` element would be covered by the keyboard.

Even doing similar to what [the example states](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/safe-area?view=net-maui-10.0#keyboard-aware-layouts) and using `SafeAreaEdges="Container, Container, Container, SoftInput"` will not accomplish what we are after.

On iOS this works as intended. Here I tap the entry with "Placeholder 15" placeholder text. This will focus it as the current element, the button is still visible, and I can still scroll to placeholder 1 - 20.

https://github.com/user-attachments/assets/381957f5-1615-4e3b-8f82-31d863a0ab26

On Android if I tap place holder 9 the content will move up so 9 is editable. However the button is not visible. Additionally if I scroll all the way down I can't get to entry 20, and if I scroll all the way up I can't get above entry 3.

https://github.com/user-attachments/assets/32591b7a-1c24-4fc9-9301-902de6c094c2

(EDIT: I did another test where I removed `SafeAreaEdges` from my test project and I had the exact same behaviour. It did not seem like `SafeAreaEdges` was doing anything at all here)

Considering `SafeAreaEdges` is made to be applied to containers such as a Grid and to keep that grid not covered by soft input, I would assume I am either misunderstanding how it is intended to be used or this is just broken.

(EDIT: The comments below also show some workarounds and other settings to change, all of which don't result in a workable solution for keyboard not covering content correctly or not breaking page layout)

### Steps to Reproduce

1. Clone repo
2. Run on iOS simulator (or device) and touch an element lower on the page
3. Note how the button is still visible and how you can access all input elements still
4. Run on Android emulator (or device) and touch an element lower on the page
5. Note the behaviour difference between what you just did on Android

### Link to public reproduction project repository

https://github.com/beeradmoore/MauiKeyboardSafeAreaTest

### Version with bug

10.0.30

### Is this a regression from previous behavior?

No, this is something new, Not sure, did not test other versions

### Last version that worked well

Unknown/Other

### Affected platforms

Android

### Affected platform versions

Android 16

### Did you find any workaround?

Nope

### Relevant log output

```shell

```

Contributor guide

Open the contributing guide

Research direction

Clone the linked MauiKeyboardSafeAreaTest reproduction and run it on the iOS simulator and Android emulator or device using version 10.0.30. Start by comparing the SafeAreaEdges behavior around the Grid, ContentPage, and keyboard-aware layout described in the issue. Done means Android keeps the button visible and allows all entries to be reached, matching the iOS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, csharp
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.