Custom Webview Renderer in MAUI- Android

Question

In Xamarin forms we are using custom WebView renderer.

using Dev.Controls;
using Dev.Droid.Controls;
using Android.Content;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using WebView = Android.Webkit.WebView;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace Dev.Droid.Controls
{
    /// <summary>
    /// CustomWebViewRenderer
    /// </summary>
    public class CustomWebViewRenderer : WebViewRenderer
    {
        /// <summary>
        /// _customwebView
        /// </summary>
        static CustomWebView _customwebView = null;

        /// <summary>
        /// _webView
        /// </summary>
        WebView _webView;

        /// <summary>
        /// CustomWebViewRenderer
        /// </summary>
        /// <param name="context"></param>
        public CustomWebViewRenderer(Context context) : base(context)
        {

        }

        /// <summary>
        /// XamWebViewClient
        /// </summary>
        class XamWebViewClient : Android.Webkit.WebViewClient
        {
            /// <summary>
            /// OnPageFinished
            /// </summary>
            /// <param name="view"></param>
            /// <param name="url"></param>
            public override async void OnPageFinished(WebView view, string url)
            {
                if (_customwebView != null)
                {
                    int i = 10;
                    await System.Threading.Tasks.Task.Delay(200);// The time here can be adjusted
                    _customwebView.HeightRequest = view.ContentHeight;
                }
            }
        }

        /// <summary>
        /// OnElementChanged
        /// </summary>
        /// <param name="e"></param>
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            _customwebView = e.NewElement as CustomWebView;
            _webView = Control;

            if (e.OldElement == null)
            {
                _webView.SetWebViewClient(new XamWebViewClient());
            }
        }
    }
}

how to convert this code in MAUI because i try and i am getting error because i want to adjust html content in webview height based on content

Answer 1

Hello,

You can do it by handler for webview. I add webview handler in the page's background code.

Then you can use Conditional compilation for android platform achievement.

You can refer to the following code.

  public MainPage()
        {
            InitializeComponent();


           Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
                if (view is CustomWebView)
                {
#if ANDROID
                CustomWebView customWebView=view as CustomWebView;
                handler.PlatformView.SetWebViewClient(new XamWebViewClient(customWebView));
#endif
                }
            });
        }



#if ANDROID
    public class XamWebViewClient : Android.Webkit.WebViewClient
    {
        private CustomWebView _customwebView;


       public XamWebViewClient(CustomWebView _customwebView)
        {
            this._customwebView = _customwebView;
        }


       /// <summary>
        /// OnPageFinished
        /// </summary>
        /// <param name="view"></param>
        /// <param name="url"></param>
        public override async void OnPageFinished(Android.Webkit.WebView? view, string? url)
        {
            if (_customwebView != null)
            {
                int i = 10;
                await System.Threading.Tasks.Task.Delay(200);// The time here can be adjusted
                _customwebView.HeightRequest = view.ContentHeight;
            }
        }
    }
#endif

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.