Zoom text of webview in xamarin forms

Question

I have used Xamarin android for zoomIn text using the following method:

    button4.Click += zoomIn;
    private void zoomIn(object sender, EventArgs e)
    {
        web_view.Settings.TextZoom = (web_view.Settings.TextZoom + 10);
    }

But now I am using xamarin forms, but this method is not helping me. How can I do so?

Answer 1

If you want to use the method of native WebView for android, you can

1. Create your own WebView in portable lib to register such property for zoom in/out.

2. Create a custom renderer for your WebView in Android peoject.

For example:

create your own WebView :

public class MyWebView:WebView
{

        public int ZoomInLevel
    {
        get { return (int)GetValue(ZoomInLevelProperty); }
        set { SetValue(ZoomInLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomInLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomInLevel",
            returnType: typeof(int),
            declaringType:typeof(MyWebView),
            defaultValue:3,
            propertyChanged: OnZoomInLevelPropertyChanged);

    private static void OnZoomInLevelPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {           
    }

}

Use this control:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YOUR-PROJECT-NAMESPACE"
             x:Class="FormsIssue.Page1">
    <StackLayout>
        <local:MyWebView x:Name="webView" Source="http://stackoverflow.com/questions/41328371/zoom-text-of-webview-in-xamarin-forms"
                 HeightRequest="600" WidthRequest="400"/>

        <Button Text="Zoom" Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

in your android project custom your renderer like this:

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
namespace FormsIssue.Droid
{
    public class MyWebViewRenderer:WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }
            var element = Element as MyWebView;
            Control.Settings.TextZoom = element.ZoomInLevel;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (Control != null)
            {
                Control.Settings.BuiltInZoomControls = true;

                //to show the default zoom controls, if you want to use your own button, set this property to false.
                Control.Settings.DisplayZoomControls = true;
            }

            var element = Element as MyWebView;
            Control.Settings.TextZoom = element.ZoomInLevel;

            base.OnElementPropertyChanged(sender, e);
        }
    }
}

Finally in your button click event, you can change this property like this:

private void Button_Clicked(object sender, EventArgs e)
{
    webView.ZoomInLevel = 100;
}

Update:

I've modified my code, so every time when a ZoomIn button is clicked, the WebView will be zoomed in, and so when a ZoomOut button is clicked:

private void ZoomIn_Clicked(object sender, EventArgs e)
{
    webView.ZoomInLevel += 10;
}

private void ZoomOut_Clicked(object sender, EventArgs e)
{
    webView.ZoomOutLevel -= 10;
}

MyWebView:

public class MyWebView : WebView
{
    public int ZoomInLevel
    {
        get { return (int)GetValue(ZoomInLevelProperty); }
        set { SetValue(ZoomInLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomInLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomInLevel",
            returnType: typeof(int),
            declaringType: typeof(MyWebView),
            defaultValue: 3,
            propertyChanged: OnZoomLevelPropertyChanged);

    public int ZoomOutLevel
    {
        get { return (int)GetValue(ZoomOutLevelProperty); }
        set { SetValue(ZoomOutLevelProperty, value); }
    }

    public static readonly BindableProperty ZoomOutLevelProperty =
        BindableProperty.Create(
            propertyName: "ZoomOutLevel",
            returnType: typeof(int),
            declaringType: typeof(MyWebView),
            defaultValue: 3,
            propertyChanged: OnZoomLevelPropertyChanged);

    private static void OnZoomLevelPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
    }
}

Custom renderer:

[assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
namespace FormsIssue.Droid
{
    public class MyWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null || Element == null)
            {
                return;
            }

            //Initial zoom
            var element = Element as MyWebView;
            element.ZoomInLevel = element.ZoomOutLevel = Control.Settings.TextZoom;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (Control != null)
            {
                Control.Settings.BuiltInZoomControls = true;

                //to show the default zoom controls, if you want to use your own button, set this property to false.
                Control.Settings.DisplayZoomControls = true;
            }

            var element = Element as MyWebView;
            //ZoomIn
            if (e.PropertyName == "ZoomInLevel")
                element.ZoomOutLevel = Control.Settings.TextZoom = element.ZoomInLevel;
            //ZoomOut
            else if (e.PropertyName == "ZoomOutLevel")
                element.ZoomInLevel = Control.Settings.TextZoom = element.ZoomOutLevel;

            base.OnElementPropertyChanged(sender, e);
        }
    }
}