Zooming in Android

Introduction

This article explains how to zoom in Android. In this application there are two images for which you zoom. So when you click on one of the images the image is zoomed. When you click on the zoomed image it returns to its original magnification.

In this article you will first create a project and in the XML layout you will use two ImageButtons and one ImageView. In both ImageButtons you will use various images on which you do the zooming. And in the image view you will show the zoomed images.

In the Java class file you will create an object of the Animator class (Animator is a superclass that provides basic support for Animation) and the Id of  the ImageButtons and ImagView. In this you will set both of the ImageButtons on its click event and in the click event you will use the zoomImageFromThumb() method. Inside the zoomImageFromThumbMethod we will check whether animation has already started. If it is already started then you will cancel it. Now you will  use image by the ImageView by calling the setImageResource. Now you will create the object of the Rect class (Recct holds four integer coordinates for the rectangle) and Point class (the point class holds two integer coordinates). Now you will call the offset (to determine the offset of the rectangle add the dx to the right and left of the rectangle and dy to the top and bottom) with the Rect Object. After getting the width and height you will set the ImageButton on which you click to the setAlpha visibility to opaque (by ing 0) and  set the imageview visibility to be visible. Now you will create the object of the AnimatorSet class to call the method to set Zooming of the image.

Do the same with the other ImageButton.

Step 1    

Create an XML file and write this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <LinearLayout android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:padding="16dp">

    <TextView style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ZoomIngActivity" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">

      <com.example.android.animationsdemo.TouchHighlightImageButton
          android:id="@+id/button_1"
          android:layout_width="100dp"
          android:layout_height="75dp"
          android:layout_marginRight="1dp"
          android:src="@drawable/thumb1"
          android:scaleType="centerCrop"
          android:contentDescription="@string/description_image_1" />

      <com.example.android.animationsdemo.TouchHighlightImageButton
          android:id="@+id/button_2"
          android:layout_width="100dp"
          android:layout_height="75dp"
          android:src="@drawable/thumb2"
          android:scaleType="centerCrop"
          android:contentDescription="@string/description_image_2" />

    </LinearLayout>

  </LinearLayout>

  <ImageView
      android:id="@+id/expanded_image"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:visibility="invisible"
      android:contentDescription="@string/description_zoom_touch_close" />

</FrameLayout>

 

Step 2

Create a Java file and write the following.

 

In the a class file you will create the object of the Animator class (the Animator class is a superclass that provides basic support for Animation) and  the Id of  the ImageButtons and ImagView. In this you will set both of the ImageButtons on its click event. and in the click event you will call the zoomImageFromThumb() method. In the zoomImageFromThumb method we will check whether the animation is already started or not. If it is already started then you will cancel it. Now you will  use an image in an ImageView by calling the setImageResource. Now you will create the object of the Rect class (Rect holds four integer coordinates for the rectangle) and Point class (the Point class holds two integer coordinates) . Now you will call the offset (determine which offset of the rectangle by adding dx to the right and left of the rectangle and dy to the top and bottom) with the Rect Object. After getting the width and height you will set the ImageButton on which you click to the setAlpha visibility to opaque (by ing 0) and set the imageview visibility to be visible. Now you will create the object of the AnimatorSet class to call the method to set the Zooming of the image.

 

Do the same with the other ImageButton.

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Intent;
import android.graphics.Point;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.NavUtils;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;

/**
 * A sample showing how to zoom an image thumbnail to full-screen, by animating the bounds of the
 * zoomed image from the thumbnail bounds to the screen bounds.
 *
 * <p>In this sample, the user can touch one of two images. Touching an image zooms it in, covering
 * the entire activity content area. Touching the zoomed-in image hides it.</p>
 */
public class ZoomActivity extends FragmentActivity {

    private Animator CurrentmAnimator;
 private int mShortAnimationDuration;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zoom);

        final View thumb1View = findViewById(R.id.button_1);
        thumb1View.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                zoomImageFromThumb(thumb1View, R.drawable.image1);
            }
        });

        final View imagebutton1 = findViewById(R.id.button_2);
        imagebutton1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                zoomImageFromThumb(imagebutton1, R.drawable.image2);
            }
        });
        mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                NavUtils.navigateUpTo(this, new Intent(this, MainActivity.class));
                return true;
        }

        return super.onOptionsItemSelected(item);
    }
   private void zoomImageFromThumb(final View thumbView, int imageResId) {
        if (CurrentmAnimator != null) {
            CurrentmAnimator.cancel();
        }
        final ImageView ImageViewexpanded = (ImageView) findViewById(R.id.expanded_image);
        ImageViewexpanded.setImageResource(imageResId);

        final Rect Boundsstart = new Rect();
        final Rect finalBounds = new Rect();
        final Point globalOffset = new Point();
        thumbView.getGlobalVisibleRect(Boundsstart);
        findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);
        Boundsstart.offset(-globalOffset.x, -globalOffset.y);
        finalBounds.offset(-globalOffset.x, -globalOffset.y);
        float startScale;
        if ((float) finalBounds.width() / finalBounds.height()
                > (float) Boundsstart.width() / Boundsstart.height()) {
            startScale = (float) Boundsstart.height() / finalBounds.height();
            float startWidth = startScale * finalBounds.width();
            float deltaWidth = (startWidth - Boundsstart.width()) / 2;
            Boundsstart.left -= deltaWidth;
            Boundsstart.right += deltaWidth;
        } else {
            startScale = (float) Boundsstart.width() / finalBounds.width();
            float startHeight = startScale * finalBounds.height();
            float deltaHeight = (startHeight - Boundsstart.height()) / 2;
            Boundsstart.top -= deltaHeight;
         Boundsstart.bottom += deltaHeight;
        }
        thumbView.setAlpha(0f);
        ImageViewexpanded.setVisibility(View.VISIBLE);
       ImageViewexpanded.setPivotX(0f);
       ImageViewexpanded.setPivotY(0f);
        AnimatorSet set = new AnimatorSet();
        set
                .play(ObjectAnimator.ofFloat( ImageViewexpanded, View.X, Boundsstart.left,
                        finalBounds.left))
                .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.Y, Boundsstart.top,
                        finalBounds.top))
                .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.SCALE_X, startScale, 1f))
                .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.SCALE_Y, startScale, 1f));
        set.setDuration(mShortAnimationDuration);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                CurrentmAnimator = null;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                CurrentmAnimator = null;
            }
        });
        set.start();
       CurrentmAnimator = set;
        final float startScaleFinal = startScale;
       ImageViewexpanded.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (CurrentmAnimator != null) {
                    CurrentmAnimator.cancel();
                }
                AnimatorSet set = new AnimatorSet();
                set
                        .play(ObjectAnimator.ofFloat( ImageViewexpanded, View.X, Boundsstart.left))
                        .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.Y, Boundsstart.top))
                        .with(ObjectAnimator
                                .ofFloat( ImageViewexpanded, View.SCALE_X, startScaleFinal))
                        .with(ObjectAnimator
                                .ofFloat( ImageViewexpanded, View.SCALE_Y, startScaleFinal));
                set.setDuration(mShortAnimationDuration);
                set.setInterpolator(new DecelerateInterpolator());
                set.addListener(new AnimatorListenerAdapter() {
                    @Override

                   public void onAnimationEnd(Animator animation) {
                        thumbView.setAlpha(1f);
                        ImageViewexpanded.setVisibility(View.GONE);
                        CurrentmAnimator = null;
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {
                        thumbView.setAlpha(1f);
                        ImageViewexpanded.setVisibility(View.GONE);
                        CurrentmAnimator= null;
                    }
                });
                set.start();
                CurrentmAnimator = set;
            }
        });
    }
}

Step 3
 

Step 4 

 

When you click on the first image:

Step 5

When you click on the zoom image:

Step 6

When you click on the second image:

Step 7

When you click on the zoom image: