Contribute
Android

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:

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/container"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.    
  6.   <LinearLayout android:layout_width="match_parent"  
  7.       android:layout_height="wrap_content"  
  8.       android:orientation="vertical"  
  9.       android:padding="16dp">  
  10.    
  11.     <TextView style="?android:textAppearanceSmall"  
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:text="ZoomIngActivity" />  
  15.     <LinearLayout  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_marginTop="16dp"  
  19.         android:orientation="horizontal">  
  20.    
  21.       <com.example.android.animationsdemo.TouchHighlightImageButton  
  22.           android:id="@+id/button_1"  
  23.           android:layout_width="100dp"  
  24.           android:layout_height="75dp"  
  25.           android:layout_marginRight="1dp"  
  26.           android:src="@drawable/thumb1"  
  27.           android:scaleType="centerCrop"  
  28.           android:contentDescription="@string/description_image_1" />  
  29.    
  30.       <com.example.android.animationsdemo.TouchHighlightImageButton  
  31.           android:id="@+id/button_2"  
  32.           android:layout_width="100dp"  
  33.           android:layout_height="75dp"  
  34.           android:src="@drawable/thumb2"  
  35.           android:scaleType="centerCrop"  
  36.           android:contentDescription="@string/description_image_2" />  
  37.    
  38.     </LinearLayout>  
  39.    
  40.   </LinearLayout>  
  41.    
  42.   <ImageView  
  43.       android:id="@+id/expanded_image"  
  44.       android:layout_width="match_parent"  
  45.       android:layout_height="match_parent"  
  46.       android:visibility="invisible"  
  47.       android:contentDescription="@string/description_zoom_touch_close" />  
  48.    
  49. </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.

  1. import android.animation.Animator;  
  2. import android.animation.AnimatorListenerAdapter;  
  3. import android.animation.AnimatorSet;  
  4. import android.animation.ObjectAnimator;  
  5. import android.content.Intent;  
  6. import android.graphics.Point;  
  7. import android.graphics.Rect;  
  8. import android.os.Bundle;  
  9. import android.support.v4.app.FragmentActivity;  
  10. import android.support.v4.app.NavUtils;  
  11. import android.view.MenuItem;  
  12. import android.view.View;  
  13. import android.view.animation.DecelerateInterpolator;  
  14. import android.widget.ImageView;  
  15.    
  16. /** 
  17.  * A sample showing how to zoom an image thumbnail to full-screen, by animating the bounds of the 
  18.  * zoomed image from the thumbnail bounds to the screen bounds. 
  19.  * 
  20.  * <p>In this sample, the user can touch one of two images. Touching an image zooms it in, covering 
  21.  * the entire activity content area. Touching the zoomed-in image hides it.</p> 
  22.  */  
  23. public class ZoomActivity extends FragmentActivity {  
  24.    
  25.     private Animator CurrentmAnimator;  
  26.  private int mShortAnimationDuration;  
  27.    
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.activity_zoom);  
  32.    
  33.         final View thumb1View = findViewById(R.id.button_1);  
  34.         thumb1View.setOnClickListener(new View.OnClickListener() {  
  35.             @Override  
  36.             public void onClick(View view) {  
  37.                 zoomImageFromThumb(thumb1View, R.drawable.image1);  
  38.             }  
  39.         });  
  40.    
  41.         final View imagebutton1 = findViewById(R.id.button_2);  
  42.         imagebutton1.setOnClickListener(new View.OnClickListener() {  
  43.             @Override  
  44.             public void onClick(View view) {  
  45.                 zoomImageFromThumb(imagebutton1, R.drawable.image2);  
  46.             }  
  47.         });  
  48.         mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);  
  49.     }  
  50.    
  51.     @Override  
  52.     public boolean onOptionsItemSelected(MenuItem item) {  
  53.         switch (item.getItemId()) {  
  54.             case android.R.id.home:  
  55.                 NavUtils.navigateUpTo(this, new Intent(this, MainActivity.class));  
  56.                 return true;  
  57.         }  
  58.    
  59.         return super.onOptionsItemSelected(item);  
  60.     }  
  61.    private void zoomImageFromThumb(final View thumbView, int imageResId) {  
  62.         if (CurrentmAnimator != null) {  
  63.             CurrentmAnimator.cancel();  
  64.         }  
  65.         final ImageView ImageViewexpanded = (ImageView) findViewById(R.id.expanded_image);  
  66.         ImageViewexpanded.setImageResource(imageResId);  
  67.    
  68.         final Rect Boundsstart = new Rect();  
  69.         final Rect finalBounds = new Rect();  
  70.         final Point globalOffset = new Point();  
  71.         thumbView.getGlobalVisibleRect(Boundsstart);  
  72.         findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);  
  73.         Boundsstart.offset(-globalOffset.x, -globalOffset.y);  
  74.         finalBounds.offset(-globalOffset.x, -globalOffset.y);  
  75.         float startScale;  
  76.         if ((float) finalBounds.width() / finalBounds.height()  
  77.                 > (float) Boundsstart.width() / Boundsstart.height()) {  
  78.             startScale = (float) Boundsstart.height() / finalBounds.height();  
  79.             float startWidth = startScale * finalBounds.width();  
  80.             float deltaWidth = (startWidth - Boundsstart.width()) / 2;  
  81.             Boundsstart.left -= deltaWidth;  
  82.             Boundsstart.right += deltaWidth;  
  83.         } else {  
  84.             startScale = (float) Boundsstart.width() / finalBounds.width();  
  85.             float startHeight = startScale * finalBounds.height();  
  86.             float deltaHeight = (startHeight - Boundsstart.height()) / 2;  
  87.             Boundsstart.top -= deltaHeight;  
  88.          Boundsstart.bottom += deltaHeight;  
  89.         }  
  90.         thumbView.setAlpha(0f);  
  91.         ImageViewexpanded.setVisibility(View.VISIBLE);  
  92.        ImageViewexpanded.setPivotX(0f);  
  93.        ImageViewexpanded.setPivotY(0f);  
  94.         AnimatorSet set = new AnimatorSet();  
  95.         set  
  96.                 .play(ObjectAnimator.ofFloat( ImageViewexpanded, View.X, Boundsstart.left,  
  97.                         finalBounds.left))  
  98.                 .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.Y, Boundsstart.top,  
  99.                         finalBounds.top))  
  100.                 .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.SCALE_X, startScale, 1f))  
  101.                 .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.SCALE_Y, startScale, 1f));  
  102.         set.setDuration(mShortAnimationDuration);  
  103.         set.setInterpolator(new DecelerateInterpolator());  
  104.         set.addListener(new AnimatorListenerAdapter() {  
  105.             @Override  
  106.             public void onAnimationEnd(Animator animation) {  
  107.                 CurrentmAnimator = null;  
  108.             }  
  109.    
  110.             @Override  
  111.             public void onAnimationCancel(Animator animation) {  
  112.                 CurrentmAnimator = null;  
  113.             }  
  114.         });  
  115.         set.start();  
  116.        CurrentmAnimator = set;  
  117.         final float startScaleFinal = startScale;  
  118.        ImageViewexpanded.setOnClickListener(new View.OnClickListener() {  
  119.             @Override  
  120.             public void onClick(View view) {  
  121.                 if (CurrentmAnimator != null) {  
  122.                     CurrentmAnimator.cancel();  
  123.                 }  
  124.                 AnimatorSet set = new AnimatorSet();  
  125.                 set  
  126.                         .play(ObjectAnimator.ofFloat( ImageViewexpanded, View.X, Boundsstart.left))  
  127.                         .with(ObjectAnimator.ofFloat( ImageViewexpanded, View.Y, Boundsstart.top))  
  128.                         .with(ObjectAnimator  
  129.                                 .ofFloat( ImageViewexpanded, View.SCALE_X, startScaleFinal))  
  130.                         .with(ObjectAnimator  
  131.                                 .ofFloat( ImageViewexpanded, View.SCALE_Y, startScaleFinal));  
  132.                 set.setDuration(mShortAnimationDuration);  
  133.                 set.setInterpolator(new DecelerateInterpolator());  
  134.                 set.addListener(new AnimatorListenerAdapter() {  
  135.                     @Override  
  136.    
  137.                    public void onAnimationEnd(Animator animation) {  
  138.                         thumbView.setAlpha(1f);  
  139.                         ImageViewexpanded.setVisibility(View.GONE);  
  140.                         CurrentmAnimator = null;  
  141.                     }  
  142.    
  143.                     @Override  
  144.                     public void onAnimationCancel(Animator animation) {  
  145.                         thumbView.setAlpha(1f);  
  146.                         ImageViewexpanded.setVisibility(View.GONE);  
  147.                         CurrentmAnimator= null;  
  148.                     }  
  149.                 });  
  150.                 set.start();  
  151.                 CurrentmAnimator = set;  
  152.             }  
  153.         });  
  154.     }  
  155. }  

Step 3
 
1.jpg

Step 4 
 
When you click on the first image:

2.jpg

Step 5

When you click on the zoom image:

1.jpg

Step 6

When you click on the second image:

3.jpg

Step 7

When you click on the zoom image:

1.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs