When developing forms, a good practice is that when the keyboard is shown we shouldn’t hide the text entries behind it. Instead of that the text entry should raise up while typing. This is pretty easy to do in Xamarin Forms, by just adding the entry inside the Scrollview and that’s it.
But what happens if you also want to adjust more controls than just the entries, like images, buttons, etc. This is a common use case when we are developing a Login screen, if we want to always show the Login button even when keyboard shows up.
Let’s do it step by step.
Doing this is a bit different depending on the platform. On android you just need to add your elements inside a Grid and use the platform specific UseWindowSoftInputModeAdjust Resize in the Application XAML. On iOS we have to create a custom renderer to do the resize.
As we want a solution to works for both, in the sample project we are going to start creating a custom Grid class (Although we only use it for iOS).
1-Create a new class that extend from Grid
2-Use the custom Grid and add your elements inside it
3-Add platform specific UseWindowSoftInputModeAdjust with Resize value on the Application XAML
(This is only necessary for Android)
4-Create a custom renderer in your iOS project
And that’s all. Check the full source code here.
Result
Happy coding!
10 Comments
I am looking for this answer of this proble for a while but didn’t get any proper solution but this helps me.
Thanks Charlin Agramonte.
Hello, great article!
I’m using prism framework, don’t work!
Property “WindowSoftInputModeAdjust” was not found in type Application..
can you help me?
Hi Angelru, if you are using a version of Xamarin Forms < 2.3.3, you can try this workaround: https://gist.github.com/amay077/b1164b21af276832b666c2b7825bdab8
If not make sure you are adding in your App.xaml.cs file
xmlns:android=”clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core”
android:Application.WindowSoftInputModeAdjust=”Resize”
Very helpfully article
Thank you, exactly what I was looking for!
I would also keep the original `Margin` value and use it to keep the screen layout consistent. Luckily It can be easily done by storing the `Element.Margin` to a backing field on `if (e.NewElement != null)` and then using it everywhere we set a new `Margin` value.
Kind regards,
Evgeny
Awesome post!
It looks like the keyboard “squishes” the upper view. Is there a way to for KeyboardView to define which control it wants to adjust the view for?
For example, my LoginPage has a Register button, but it’d be cool if I could set myKeyboardView.Bottom=myLoginButton
Is there any way to control the b? For example, let’s say LoginPage has “ForgotPassword” and “Register”.
Maybe there’s a way to define the control in KeyboardView.
Hi Dennis, for that is the grid. Just set Height Auto to those elements you want to be adjusted. Also if you want to hide elements when the keyboard is open you can play with the IsVisible property of each element when the entry is focused.
Pretty helpful article, thank you Charlin keep up with this good content.
Happy to come across this kind of posts. Really helpful!
Thanks for sharing
Nice post, Charlin!
To work properly in my Samsung J5 (Android 6.0) I had to change the first row grid definition to:
Thank you!