How to prevent Editor to go behind the keyboard in Xamarin.Forms?

Question

I have a Chat app. Currently, there is an Entry control for add chat text. Now I want to provide multiline Entry, same like Whatsapp.

• If user type more than one li

Answer 1

For Ios there is one plugin. You can use that. The link is Here.

For Andorid you have to just set below code in MainActivity after LoadApplication(new App()) method.

App.Current.On<Xamarin.Forms.PlatformConfiguration.Android().
UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

Updated answer for iOS :

For IOS you can use the following custom renderer to solve the keyboard overlapping issue. And please removed the keyboardoverlap nuget package from the project.

using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using HBIClientFacingApp;
using HBIClientFacingApp.iOS;

[assembly:ExportRenderer( typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace YourNameSpace.iOS
{
    public class CustomEditorRenderer: EditorRenderer
    {
        public ChatEntryRenderer()
        {   
            UIKeyboard.Notifications.ObserveWillShow ((sender, args) => {

                if (Element != null)
                {
                    Element.Margin = new Thickness(0,0,0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
                }
            });

            UIKeyboard.Notifications.ObserveWillHide ((sender, args) => {

                if (Element != null)
                {
                       Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
                }

            }); 
        }
    }
}

Answer 2

Try this renderer for ios.

using System;  
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;   

[assembly:ExportRenderer( typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace YourNameSpace.iOS
{
    public class CustomEditorRenderer: EditorRenderer
    {
        public ChatEntryRenderer()
        {   
            UIKeyboard.Notifications.ObserveWillShow ((sender, args) => {

                if (Element != null)
                {
                    Element.Margin = new Thickness(0,0,0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
                }
            });

            UIKeyboard.Notifications.ObserveWillHide ((sender, args) => {

                if (Element != null)
                {
                       Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
                }

            }); 
        }
    }
}

for android add this in MainActivity

 App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().
    UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

Answer 3

You can try to change this line:

<local:ChatEditorWithPlaceholder  x:Name="txtMessage" Grid.Column="0"  TextChanged="EnableSend" Text="{Binding OutGoingText}"/>

For this one:

<Editor x:Name="txtMessage" Grid.Column="0" AutoSize="TextChanges" TextChanged="EnableSend" Text="{Binding OutGoingText}"/>