locked
Xamarin Forms Zoom in Zoom out in Web view Does not work Smoothly RRS feed

  • Question

  • User382872 posted

    I an Custom Render Webview In that I load a Pdf. When that Pdf is trying to zoom in or zoom out. I can clearly see lacking. Frist, I thought it's the android problem then I download pdf and try it It's okay it runs smoothly.

    Here my code

    In the shared Project

       public class CustomWebView : WebView
    {
     public static readonly BindableProperty UriProperty = BindableProperty.Create(nameof(Uri),typeof(string),typeof(CustomWebView),default(string));
    
     public string Uri
     {
        get => (string)GetValue(UriProperty);
        set => SetValue(UriProperty, value);
     }       
    

    } In anrioid Custom Render Like this

       public class CustomWebViewRenderer : WebViewRenderer
    {
    public CustomWebViewRenderer(Context context) : base(context)
    {
    }
    
     protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);
    
        if (e.NewElement != null)
        {              
            Control.Settings.AllowUniversalAccessFromFileURLs = true;                   
            Control.Settings.BuiltInZoomControls = true;
            Control.Settings.DisplayZoomControls = true;
    
        }
        this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
      }
      protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
      {
        if (e.PropertyName != "Uri") return;
        var customWebView = Element as CustomWebView;
        if (customWebView != null)
        {
            Control.LoadUrl(string.Format("file:///android_asset/pdfjs/web/viewer.html?file={0}", string.Format("file:///android_asset/Content/{0}", 
       WebUtility.UrlEncode(customWebView.Uri))));        
        }
     }
    
        }
    

    It's getting the pdf and also it's showing without problem but when zoom in or out clearly can see the latching How to solve this latching problem.

    The zoom in/out function in Webview is not smooth

    Tuesday, June 4, 2019 3:48 AM

Answers

  • User382871 posted

    Try to use a view_ renderer to achieve Zoom, refer to the code: CustomWebView.cs public class CustomWebView : View { public CustomWebView() { } } Renderer.cs ``` [assembly:ExportRenderer(typeof(CustomWebView),typeof(CustomWebViewRenderer))] namespace App15.Droid { public class CustomWebViewRenderer : ViewRenderer { private Context _context; public CustomWebViewRenderer(Context context) : base(context) { _context = context; } protected override void OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e);

            if (Control == null)
            {
                //Control.Settings.AllowUniversalAccessFromFileURLs = true;
                //Control.Settings.BuiltInZoomControls = true;
                //Control.Settings.DisplayZoomControls = true;
                //Control.SetLayerType(LayerType.Hardware, null);
    
                var webview = new Android.Webkit.WebView(_context);
                webview.Settings.UseWideViewPort = true;
                webview.Settings.LoadWithOverviewMode = true;
                webview.Settings.SetSupportZoom(true);
                webview.Settings.BuiltInZoomControls = true;
                webview.Settings.DisplayZoomControls = false;
                webview.SetWebViewClient(new WebViewClient());
                SetNativeControl(webview);
    
                Control.LoadUrl("https://www.google.com");
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, June 5, 2019 10:04 AM

All replies

  • User382871 posted

    With the EnableZoomControls you enable the zooming capabilities. Try to add the code in your WebViewRenderer.cs. ``` void UpdateEnableZoomControls() { var value = Element.OnThisPlatform().ZoomControlsEnabled(); Control.Settings.SetSupportZoom(value); Control.Settings.BuiltInZoomControls = value; }

    void UpdateDisplayZoomControls() { Control.Settings.DisplayZoomControls = Element.OnThisPlatform().ZoomControlsDisplayed(); } ```

    Tutorial : https://blog.verslu.is/xamarin/xamarin-forms-xamarin/zooming-android-webview-xamarin-forms/ Code : https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/WebViewRenderer.cs

    Tuesday, June 4, 2019 5:54 AM
  • User382872 posted

    @yelinzh It does not recognize the ZoomControlsDisplayed() method

    Tuesday, June 4, 2019 5:56 AM
  • User382871 posted

    Sorry for that, I am reseraching how to use ZoomControlsDisplayed.

    You can try to turn on hardware acceleration and add the following settings. ``` Control.SetLayerType(LayerType.Hardware,null);

    bool isZoom = Control.Settings.SupportZoom();//Gets whether the WebView supports zoom. Control.Settings.BuiltInZoomControls = true;//Gets whether the zoom mechanisms built into WebView are being used. Control.Settings.DisplayZoomControls = false; ```

    Tuesday, June 4, 2019 8:46 AM
  • User382872 posted

    @yelinzh But In anroid, it does not recognize LayerType.hardware gives an error like this

    Member 'LayerType.Hardware' cannot be accessed with an instance reference; qualify it with a type name instead  
    
    Tuesday, June 4, 2019 8:53 AM
  • User382871 posted

    I deployed the code and no errors occurred. See the tutorial: https://docs.microsoft.com/en-us/dotnet/api/android.views.layertype

    Tuesday, June 4, 2019 9:09 AM
  • User382872 posted

    @yelinzh The zoom is working when I take off my hand from the touch I need also it to zooming when it's on touch

    Wednesday, June 5, 2019 6:17 AM
  • User382871 posted

    Try to use a view_ renderer to achieve Zoom, refer to the code: CustomWebView.cs public class CustomWebView : View { public CustomWebView() { } } Renderer.cs ``` [assembly:ExportRenderer(typeof(CustomWebView),typeof(CustomWebViewRenderer))] namespace App15.Droid { public class CustomWebViewRenderer : ViewRenderer { private Context _context; public CustomWebViewRenderer(Context context) : base(context) { _context = context; } protected override void OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e);

            if (Control == null)
            {
                //Control.Settings.AllowUniversalAccessFromFileURLs = true;
                //Control.Settings.BuiltInZoomControls = true;
                //Control.Settings.DisplayZoomControls = true;
                //Control.SetLayerType(LayerType.Hardware, null);
    
                var webview = new Android.Webkit.WebView(_context);
                webview.Settings.UseWideViewPort = true;
                webview.Settings.LoadWithOverviewMode = true;
                webview.Settings.SetSupportZoom(true);
                webview.Settings.BuiltInZoomControls = true;
                webview.Settings.DisplayZoomControls = false;
                webview.SetWebViewClient(new WebViewClient());
                SetNativeControl(webview);
    
                Control.LoadUrl("https://www.google.com");
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, June 5, 2019 10:04 AM
  • User392424 posted

    No, the above think not working.

    Thursday, April 30, 2020 12:17 PM
  • User392424 posted

    Sorry, its working fine, but you have hot coded the url, how can we send our own url to this custom renderer.

    thank you.

    Thursday, April 30, 2020 12:43 PM