Post
Ask Question

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 an 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  
  2.     xmlns: android = "http://schemas.android.com/apk/res/android"  
  3.     android: id = "@+id/container"  
  4.     android: layout_width = "match_parent"  
  5.     android: layout_height = "match_parent" >< LinearLayout android: layout_width = "match_parent"  
  6.     android: layout_height = "wrap_content"  
  7.     android: orientation = "vertical"  
  8.     android: padding = "16dp" >< TextView style = "?android:textAppearanceSmall"  
  9.     android: layout_width = "wrap_content"  
  10.     android: layout_height = "wrap_content"  
  11.     android: text = "ZoomIngActivity" / >
  12. < LinearLayout  
  13.     android: layout_width = "wrap_content"  
  14.     android: layout_height = "wrap_content"  
  15.     android: layout_marginTop = "16dp"  
  16.     android: orientation = "horizontal" >

  18. < com.example.android.animationsdemo.TouchHighlightImageButton  
  19.     android: id = "@+id/button_1"  
  20.     android: layout_width = "100dp"  
  21.     android: layout_height = "75dp"  
  22.     android: layout_marginRight = "1dp"  
  23.     android: src = "@drawable/thumb1"  
  24.     android: scaleType = "centerCrop"  
  25.     android: contentDescription = "@string/description_image_1" / >

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

  35. < /LinearLayout>undefined</LinearLayout >

  37. < ImageView  
  38.     android: id = "@+id/expanded_image"  
  39.     android: layout_width = "match_parent"  
  40.     android: layout_height = "match_parent"  
  41.     android: visibility = "invisible"  
  42.     android: contentDescription = "@string/description_zoom_touch_close" / >
  43. < /FrameLayout> 
Step 2
 
Create a Java file and write the following.
 
In the 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. public class ZoomActivity extends FragmentActivity {  
  16.  private Animator CurrentmAnimator;  
  17.  private int mShortAnimationDuration;  
  18.  @Override  
  19.  protected void onCreate(Bundle savedInstanceState) {  
  20.   super.onCreate(savedInstanceState);  
  21.   setContentView(R.layout.activity_zoom);  
  22.   final View thumb1View = findViewById(R.id.button_1);  
  23.   thumb1View.setOnClickListener(new View.OnClickListener() {  
  24.    @Override  
  25.    public void onClick(View view) {  
  26.     zoomImageFromThumb(thumb1View, R.drawable.image1);  
  27.    }  
  28.   });  
  29.   final View imagebutton1 = findViewById(R.id.button_2);  
  30.   imagebutton1.setOnClickListener(new View.OnClickListener() {  
  31.    @Override  
  32.    public void onClick(View view) {  
  33.     zoomImageFromThumb(imagebutton1, R.drawable.image2);  
  34.    }  
  35.   });  
  36.   mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);  
  37.  }  
  38.  @Override  
  39.  public boolean onOptionsItemSelected(MenuItem item) {  
  40.   switch (item.getItemId()) {  
  41.    case android.R.id.home:  
  42.     NavUtils.navigateUpTo(this, new Intent(this, MainActivity.class));  
  43.     return true;  
  44.   }  
  45.   return super.onOptionsItemSelected(item);  
  46.  }  
  47.  private void zoomImageFromThumb(final View thumbView, int imageResId) {  
  48.   if (CurrentmAnimator != null) {  
  49.    CurrentmAnimator.cancel();  
  50.   }  
  51.   final ImageView ImageViewexpanded = (ImageView) findViewById(R.id.expanded_image);  
  52.   ImageViewexpanded.setImageResource(imageResId);  
  53.   final Rect Boundsstart = new Rect();  
  54.   final Rect finalBounds = new Rect();  
  55.   final Point globalOffset = new Point();  
  56.   thumbView.getGlobalVisibleRect(Boundsstart);  
  57.   findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);  
  58.   Boundsstart.offset(-globalOffset.x, -globalOffset.y);  
  59.   finalBounds.offset(-globalOffset.x, -globalOffset.y);  
  60.   float startScale;  
  61.   if ((float) finalBounds.width() / finalBounds.height() > (float) Boundsstart.width() / Boundsstart.height()) {  
  62.    startScale = (float) Boundsstart.height() / finalBounds.height();  
  63.    float startWidth = startScale * finalBounds.width();  
  64.    float deltaWidth = (startWidth - Boundsstart.width()) / 2;  
  65.    Boundsstart.left -= deltaWidth;  
  66.    Boundsstart.right += deltaWidth;  
  67.   } else {  
  68.    startScale = (float) Boundsstart.width() / finalBounds.width();  
  69.    float startHeight = startScale * finalBounds.height();  
  70.    float deltaHeight = (startHeight - Boundsstart.height()) / 2;  
  71.    Boundsstart.top -= deltaHeight;  
  72.    Boundsstart.bottom += deltaHeight;  
  73.   }  
  74.   thumbView.setAlpha(0 f);  
  75.   ImageViewexpanded.setVisibility(View.VISIBLE);  
  76.   ImageViewexpanded.setPivotX(0 f);  
  77.   ImageViewexpanded.setPivotY(0 f);  
  78.   AnimatorSet set = new AnimatorSet();  
  79.   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, 1 f)).with(ObjectAnimator.ofFloat(ImageViewexpanded, View.SCALE_Y, startScale, 1 f));  
  80.   set.setDuration(mShortAnimationDuration);  
  81.   set.setInterpolator(new DecelerateInterpolator());  
  82.   set.addListener(new AnimatorListenerAdapter() {  
  83.    @Override  
  84.    public void onAnimationEnd(Animator animation) {  
  85.     CurrentmAnimator = null;  
  86.    }  
  87.    @Override  
  88.    public void onAnimationCancel(Animator animation) {  
  89.     CurrentmAnimator = null;  
  90.    }  
  91.   });  
  92.   set.start();  
  93.   CurrentmAnimator = set;  
  94.   final float startScaleFinal = startScale;  
  95.   ImageViewexpanded.setOnClickListener(new View.OnClickListener() {  
  96.    @Override  
  97.    public void onClick(View view) {  
  98.     if (CurrentmAnimator != null) {  
  99.      CurrentmAnimator.cancel();  
  100.     }  
  101.     AnimatorSet set = new AnimatorSet();  
  102.     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));  
  103.     set.setDuration(mShortAnimationDuration);  
  104.     set.setInterpolator(new DecelerateInterpolator());  
  105.     set.addListener(new AnimatorListenerAdapter() {  
  106.      @Override  
  107.      public void onAnimationEnd(Animator animation) {  
  108.       thumbView.setAlpha(1 f);  
  109.       ImageViewexpanded.setVisibility(View.GONE);  
  110.       CurrentmAnimator = null;  
  111.      }  
  112.      @Override  
  113.      public void onAnimationCancel(Animator animation) {  
  114.       thumbView.setAlpha(1 f);  
  115.       ImageViewexpanded.setVisibility(View.GONE);  
  116.       CurrentmAnimator = null;  
  117.      }  
  118.     });  
  119.     set.start();  
  120.     CurrentmAnimator = set;  
  121.    }  
  122.   });  
  123.  }  
  124. } 
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


Similar Articles