Creating a Zoomable ScrollView in Xamarin Forms

When having a lot of content in a view we might have to lower our text size to be able to show all the content we would like in a single view, but this actually creates an issue for users with vision problems since it might be difficult and challenging for them to read the content. What if we solve this issue by providing zooming capabilities to the view, that way users could zoom the content as they need in order to be able to read it, should be a very handy feature to have.

Xamarin Forms might not have this built in by default but sure Android and iOS platform does support this on their scroll views controls, so a custom renderer will let us achieve this by inheriting from ScrollViewRenderer.

In our case we will apply this renderer to all our ScrollView by using:

[assembly: ExportRenderer(typeof(ScrollView), typeof(ZoomScrollViewRenderer))]

If you would like to apply just to specific scrollviews just create a new class that inherits from ScrollView. Let’s say we named it CustomSView.

[assembly: ExportRenderer(typeof(CustomSView),typeof(ZoomScrollViewRenderer))]

That way this renderer will just apply for the CustomSView class.

So let’s do the renderer implementation:

Android Implementation

On Android we need to create an ScaleGestureDetector on OnElementChanged method, to be able to detect the events when user scales the view by using pinch gestures.

We also need to implement IOnScaleGestureListener to listen to these events:

• OnScale – Fires when view scale is changing
• OnScaleBegin – Fires when view scale change begins
• OnScaleEnd – Fires when view scale change ends

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{

  base.OnElementChanged(e);
  mScaleDetector = new ScaleGestureDetector(Context, this);

}

Our main method for controlling the scaling is OnScale, where we will specify the conditions for our minimum and maximum zoom scaling and provide the feedback zoom animation. As seen in the code below:

Unfortunately, on Android we got one limitation, scroll view can only scroll horizontally or vertically.

iOS Implementation

On iOS, first we specify our zooming scale on OnElementChanged:

protected override void OnElementChanged(VisualElementChangedEventArgs e)
{

  base.OnElementChanged(e);
  MaximumZoomScale = 3f;
  MinimumZoomScale = 1.0f;

}

Then we listen to the event ViewForZoomingInScrollView  which asks the delegate for the view to scale when zooming is about to occur in the scroll view, so we return our subview Subviews.FirstOrDefault() when this happens.

Forms Implementation

You can find the full code here:

https://github.com/CrossGeeks/Xamarin.Samples/tree/master/Xamarin%20Forms/ZoomScrollViewSample

Happy Zooming!