Zoom Image Functionality In Android Using Xamarin.Forms

Introduction

 

This article demonstrates how to add the Zoom Image functionality in an Android application using Xamarin.Forms. Xamarin is a platform that allows us to create a multi-platform mobile applications for platforms, like Android, Windows, iOS through a single integrated development environment (IDE). And with Xamarin. Forms, the interface design for all three platform can be accomplished within its XAML-based standard, native user-interface control.

 

 

 

Step 1 

 

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.

 

Select Cross-Platform app, then give your project a name and location and click "OK" button.

 

 

  

Step 2 

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right Click >> Drawable >> Add >> Existing Item. When we click an existing item button, it opens a dialogue box.

 

 

 

Choose image location and add images.

 

.

 

The image is added successfully. Then move the cursor to that image and just verify the image.

 

 

Step 3 

 

Next, go to Project Name (Portable) >> Right-Click >> Add >> NewFolder. Select the new folder, the Dialogue Box will open. Just give the folder Name and Click "Add" button. The folder name is"Extensions".

 

 

 

Step 4 

 

Now, go to Open Solution Explorer >> Project Name (Portable) >> Extensions >> Right-Click >> Add >> Class. When you click the class button it will open the dialogue. 

 

 

 

The class name is "DoubleExtensions".

 

 

 

Step 5 

 

Next, go to Open Solution Explorer >> Project Name (Portable) >> Extensions >> DubleExtensions.cs >> Left-Click in Open the DoubleExtensions.cs page.

 

 

The code is given below just copy it. 

 

 

C# Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Image_Zoom.Extensions
{
    public static class DoubleExtensions
    {

        public static double Clamp(this double self, double min, double max)
        {
            return Math.Min(max, Math.Max(self, min));
        }

    }
}

Step 6 

 

Now, Open Solution Explorer >>  Project Name(Portable) >> MainPage.Xaml. Double click for opening the design view of this page.

 

 

 

The code is given below just copy it.

 

 

 

XAML Code 

 

We are adding an image inside the grid. 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Image_Zoom"
             x:Class="Image_Zoom.MainPage">
    <ContentPage.Content>
        <Grid Padding="20">
            <local:PinchToZoomContainer>
                <local:PinchToZoomContainer.Content>
                    <Image Source="Android.png" />
                </local:PinchToZoomContainer.Content>
            </local:PinchToZoomContainer>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Step 7

 

Next, go to  Open Solution Explorer >> Project Name >> Right-Click >> Add >> Class. 

 

 

 

The class name is "PinchToZoomContainer.cs".

 

 

 

Step 8 

 

Open Solution Explorer >> Project Name(Portable) >> PinchToZoomContainer.cs. Double click for opening this page.

 

 

 

The code is given below; just copy it.

 

 

 

C# Code 

using Image_Zoom.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Image_Zoom
{
    public class PinchToZoomContainer : ContentView
    {
        double currentScale = 1;
        double startScale = 1;
        double xOffset = 0;
        double yOffset = 0;

        public PinchToZoomContainer()
        {
            var pinchGesture = new PinchGestureRecognizer();
            pinchGesture.PinchUpdated += OnPinchUpdated;
            GestureRecognizers.Add(pinchGesture);
        }

        void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
        {
            if (e.Status == GestureStatus.Started)
            {
                // Store the current scale factor applied to the wrapped user interface element,
                // and zero the components for the center point of the translate transform.
                startScale = Content.Scale;
                Content.AnchorX = 0;
                Content.AnchorY = 0;
            }
            if (e.Status == GestureStatus.Running)
            {
                // Calculate the scale factor to be applied.
                currentScale += (e.Scale - 1) * startScale;
                currentScale = Math.Max(1, currentScale);

                // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
                // so get the X pixel coordinate.
                double renderedX = Content.X + xOffset;
                double deltaX = renderedX / Width;
                double deltaWidth = Width / (Content.Width * startScale);
                double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

                // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
                // so get the Y pixel coordinate.
                double renderedY = Content.Y + yOffset;
                double deltaY = renderedY / Height;
                double deltaHeight = Height / (Content.Height * startScale);
                double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

                // Calculate the transformed element pixel coordinates.
                double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
                double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

                // Apply translation based on the change in origin.
                Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
                Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);

                // Apply scale factor
                Content.Scale = currentScale;
            }
            if (e.Status == GestureStatus.Completed)
            {
                // Store the translation delta's of the wrapped user interface element.
                xOffset = Content.TranslationX;
                yOffset = Content.TranslationY;
            }
        }
    }
}

Step 9 

 

Next, select the built and deploy option followed by selecting from the list of Android Emulators or Simulator. You can choose any API (Application Program Interface) level emulator or simulator to run it.

 

Output 

 

After a few seconds, you will see your app working. The result is displayed below.

 

 

 

Finally, we have successfully created the desired Xamarin.Forms application.

 

Conclusion 

 

I hope you have learned how to add Zoom functionality in Android using Xamarin.Forms with Visual Studio and C#.