Probably you are familiar with the scenario when you want to enter some data into an app and when the keyboard is shown it will overlap with other controls and either can hardly reach the elements lying under the keyboard or you just can’t go on using the app because of the keyboard blocks important navigation controls etc.
It’s one of the most annoying things and a total no go when creating an app.
In this article, I will show you how to detect when the keyboard is shown and what to do with the controls that would be blocked with this action.
To reach the controls that would be blocked by the keyboard we will observe when the keyboard will be shown and move the controls up to be over the keyboard. If the keyboard will be dismissed we will change the UI back to normal.
To move the controls that will be blocked by the keyboard we need to set their bottom margins to at least to the height of the keyboard to be visually over the keyboard. If we have a complex UI this could be mean a lot of work if we would do it for every control on its own.
Thankfully we don’t have to care for every single element! 🙏
Create a new custom control
To only change the margin of one element we will put all the elements in a container view (like the grid view) and only change the margin of this view. So this will be the only control we have to take care of. To create a control for that take care of the keyboard action we will create a new control.
As we don’t want to apply the pan upwards movement to every grid when the keyboard is shown we created the KeyboardView and inherit from Grid. So we have a special element for our use case.
Custom Renderer (iOS)
Because Android has its own way to care when the keyboard is shown we only have to create a custom renderer for iOS. The other thing is that android does not notify the user as reliable as iOS does. This can lead to some unwanted side effects.
Anyway, the custom renderer for iOS is pretty simple. What it does is do observe when the keyboard is shown and set the margin to the grid. If the keyboard will be dismissed the margin will be reset.
For Android, there is another way to move up the elements.
Just add this line in the MainActivity class in the Android project right under the LoadAppliaction(new App()); call. This will tell Android to resize the UI and move upwards so the keyboard does not block anything.
Using the custom control
The custom control can be used just like normal grid control.
This is how the controls work and look like in my login view:
This is how you could prevent the keyboard from overlapping you other controls in Xamarin.Forms.
Happy Coding! 💻
When using the custom grid in iOS and you’re using a stack view inside this grid it can be possible that the stack view will also set some margins and reorder your elements. This is super annoying. To fix this issue I’ve created a non-resize stack view control (howto).