How control on view height when soft keyboard appears because it covers typing message

Question

when I type message, the keyboard covers the typing message box and can't see or control input area because it not.NET MAUI Control it's related to WebView Component, how I can control in this view?

C# Code:

MenuCurve.Source = new UrlWebViewSource { Url = url };

XML Code:

<WebView x:Name="MenuCurve" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" BackgroundColor="White" ZIndex="50">

<WebView.Source>

<HtmlWebViewSource>

<HtmlWebViewSource.Html />

</HtmlWebViewSource>

</WebView.Source>

</WebView>

Answer 1

Hello,

Firstly, please open the MainActivity.cs in Platforms/Android/Resources folder. And add WindowSoftInputMode = SoftInput.AdjustPan in the [Activity] tag.

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, WindowSoftInputMode = SoftInput.AdjustPan, ConfigurationChanges = ....)]

But it still not working, this issue is caused by the to the native AndroidBug5497.

Please create a AndroidBug5497Workaround class to fix this issue, this workaround from the navtive android, I convert it from java to C#. Then use it in the OnCreate method of MainActivity.cs

using Android.App;
using Android.Content.PM;
using Android.OS;
using Android.Util;
using Android.Views;
using Android.Widget;


[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, WindowSoftInputMode = SoftInput.AdjustPan, ConfigurationChanges = ....)]
public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle? savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
           
            AndroidBug5497Workaround.assistActivity(this);
        }
    }
 
    public class AndroidBug5497Workaround
    {
 
        // For more information, see https://code.google.com/p/android/issues/detail?id=5497
        // To use this class, simply invoke assistActivity() on an Activity that already has its content view set.
 
        // CREDIT TO Joseph Johnson (https://stackoverflow.com/users/341631/joseph-johnson) for publishing the original Android solution on stackoverflow.com
 
        public static void assistActivity(Android.App.Activity activity)
        {
            new AndroidBug5497Workaround(activity);
        }
        private Android.App.Activity mActivity;
        private Android.Views.View mChildOfContent;
        private int usableHeightPrevious;
        private FrameLayout.LayoutParams frameLayoutParams;
 
        private AndroidBug5497Workaround(Android.App.Activity activity)
        {
            this.mActivity = activity;
            FrameLayout content = (FrameLayout)activity.FindViewById(Android.Resource.Id.Content);
            mChildOfContent = content.GetChildAt(0);
            ViewTreeObserver vto = mChildOfContent.ViewTreeObserver;
            vto.GlobalLayout += (object sender, EventArgs e) => {
                possiblyResizeChildOfContent();
            };
            frameLayoutParams = (FrameLayout.LayoutParams)mChildOfContent.LayoutParameters;
        }
 
        private void possiblyResizeChildOfContent()
        {
            // int usableHeightNow = computeUsableHeight();
 
            int bottomSoftKeysHeight = 0;
            bool haveSoftKey = isHaveSoftKey(mActivity);
            if (haveSoftKey)
            {
                bottomSoftKeysHeight = getBottomSoftKeysHeight(mActivity);
            }
 
 
            int usableHeightNow = computeUsableHeight();
            if (usableHeightNow != usableHeightPrevious)
            {
                int usableHeightSansKeyboard = mChildOfContent.RootView.Height;   //Screen Height
                int heightDifference = usableHeightSansKeyboard - usableHeightNow; //Blocked height
                if (heightDifference > (usableHeightSansKeyboard / 4))
                { //One quarter blocked
                  // keyboard probably just became visible
                  //frameLayoutParams.height = usableHeightSansKeyboard - heightDifference;
//The previous one was too high, so I changed it to the lower height. If you have any problems, you can adjust it here.
                    frameLayoutParams.Height = usableHeightSansKeyboard - heightDifference + (bottomSoftKeysHeight / 4);
                }
                else
                {
                    // keyboard probably just became hidden
                    //frameLayoutParams.height = usableHeightSansKeyboard;
//The previous one was too high, so I changed it to the lower height. If you have any problems, you can adjust it here.
                    frameLayoutParams.Height = usableHeightSansKeyboard - (bottomSoftKeysHeight / 4);
                }
                mChildOfContent.RequestLayout();
                usableHeightPrevious = usableHeightNow;
            }
        }
        public static bool isHaveSoftKey(Android.App.Activity activity)
        {
            Display d = activity.WindowManager.DefaultDisplay;
            DisplayMetrics realDisplayMetrics = new DisplayMetrics();
            d.GetRealMetrics(realDisplayMetrics);
            int realHeight = realDisplayMetrics.HeightPixels;
            int realWidth = realDisplayMetrics.WidthPixels;
            DisplayMetrics displayMetrics = new DisplayMetrics();
            d.GetMetrics(displayMetrics);
            int displayHeight = displayMetrics.HeightPixels;
            int displayWidth = displayMetrics.WidthPixels;
            return (realWidth - displayWidth) > 0 || (realHeight - displayHeight) > 0;
        }
 
        public static int getBottomSoftKeysHeight(Android.App.Activity activity)
        {
            Display d = activity.WindowManager.DefaultDisplay;
 
            DisplayMetrics realDisplayMetrics = new DisplayMetrics();
            d.GetRealMetrics(realDisplayMetrics);
            int realHeight = realDisplayMetrics.HeightPixels;
 
            DisplayMetrics displayMetrics = new DisplayMetrics();
            d.GetMetrics(displayMetrics);
            int displayHeight = displayMetrics.HeightPixels;
            return (realHeight - displayHeight);
        }
 
 
        private int computeUsableHeight()
        {
            Android.Graphics.Rect r = new Android.Graphics.Rect();
            mChildOfContent.GetWindowVisibleDisplayFrame(r);
            return (r.Bottom - r.Top);
        }
 
    }
 
}

By the way, here is my tested layout in Contentpage, I used your layout code and I cannot see the input area.

<Grid VerticalOptions="Fill" >

<WebView HorizontalOptions="Fill" Margin="0,0,0,30" BackgroundColor="White"  Source="https://redtenantmobilenotification.azurewebsites.net/chatbot.html" ></WebView>
 
</Grid>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.