Adjusting elements when keyboard shows in Xamarin Forms

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!

You may also like

10 Comments

  1. 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.

  2. Hello, great article!

    I’m using prism framework, don’t work!

    Property “WindowSoftInputModeAdjust” was not found in type Application..

    can you help me?

  3. 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

  4. 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.

    1. 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.

  5. 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!