Introduction

This article explains how to do ZoomIn and ZoomOut in Android.
In this you will use a ImaegView on which you perform ZoomIn and ZoomOut on a button click. To perform animation you will use the Animation class object to set the animation on the Imageview. In this you will create a folder name anim inside the res folder and create two XML files inside the anim folder to write how much an image should be ZoomOut and ZoomIn.
Step 1
Create a new project like this:
4.jpg
Step 2
Create an XML file and write the following code.
In this, you will use an ImageView and two Buttons inside the LinearLayout of which the orientation is set to vertical.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:paddingLeft="@dimen/activity_horizontal_margin"
  6. android:paddingRight="@dimen/activity_horizontal_margin"
  7. android:paddingTop="@dimen/activity_vertical_margin"
  8. android:paddingBottom="@dimen/activity_vertical_margin"
  9. tools:context=".MainActivity"
  10. android:background="#E0A51B">
  12. <LinearLayout
  13. android:layout_height="wrap_content"
  14. android:layout_width="fill_parent"
  15. android:orientation="vertical">
  18. <ImageView
  19. android:id="@+id/imageVIEW"
  20. android:layout_width="fill_parent"
  21. android:layout_height="150dp"
  22. android:background="@drawable/man_of_steel"
  23. android:layout_centerHorizontal="true"
  24. >
  25. </ImageView>
  27. <Button
  28. android:id="@+id/btnZoom_In"
  29. android:layout_height="wrap_content"
  30. android:layout_width="150dp"
  31. android:text="StartZoomIn"
  32. android:layout_centerHorizontal="true"
  33. android:layout_marginLeft="70dp"
  34. android:layout_marginTop="40dp"
  36. />
  37. <Button
  38. android:id="@+id/btn_Zoom_out"
  39. android:layout_height="wrap_content"
  40. android:layout_width="150dp"
  41. android:text="StartZoomOut"
  42. android:layout_centerHorizontal="true"
  43. android:layout_marginLeft="70dp"
  44. android:layout_marginTop="40dp"
  45. />
  46. </LinearLayout>
  47. </RelativeLayout>
Step 3
Now you will create a folder named anim inside the res folder. And inside the res folder, you will create two XML files, zoom_in, and zoom_out.
In the zoom_in.xml file you will write this:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fillAfter="true" >
  4. <scale
  5. xmlns:android="http://schemas.android.com/apk/res/android"
  6. android:duration="2000"
  7. android:fromXScale="1"
  8. android:fromYScale="1"
  9. android:pivotX="50%"
  10. android:pivotY="50%"
  11. android:toXScale="3"
  12. android:toYScale="3" >
  13. </scale>
  14. </set>
In zoom_out XML file you will write this
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fillAfter="true" >
  5. <scale
  6. xmlns:android="http://schemas.android.com/apk/res/android"
  7. android:duration="1000"
  8. android:fromXScale="1.0"
  9. android:fromYScale="1.0"
  10. android:pivotX="50%"
  11. android:pivotY="50%"
  12. android:toXScale="0.5"
  13. android:toYScale="0.5" >
  14. </scale>
  16. </set>
Step 4
Create a Java class file and write the following code.
In this class file first, you will create the id of the image view, button, and an Animation reference variable. The Animation reference variable will hold the object that will be returned by the loadAnimation method() method. After getting the object of the animation call setAnimationListener () will set the listener to the animation. Use a button and set it on setonClicklIstener to perform the animation on button click. Inside the OnClick method set the imageview on startAniamtion() method to start the animation on the button click.
  1. package com.zoominactivity;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.animation.Animation;
  7. import android.view.animation.AnimationUtils;
  8. import android.widget.Button;
  9. import android.widget.ImageView;
  11. public class MainActivity extends Activity implements Animation.AnimationListener {
  13. ImageView imageview;
  14. Button button1,button2;
  15. Animation animation,animation2;
  16. @Override
  17. protected void onCreate(Bundle savedInstanceState) {
  18. super.onCreate(savedInstanceState);
  19. setContentView(R.layout.activity_main);
  21. imageview=(ImageView)findViewById(R.id.imageVIEW);
  22. button1=(Button)findViewById(R.id.btnZoom_In);
  23. button2=(Button)findViewById(R.id.btn_Zoom_out);
  26. animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in);
  27. animation2= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
  28. animation.setAnimationListener(this);
  30. button1.setOnClickListener(new View.OnClickListener() {
  31. @Override
  32. public void onClick(View view) {
  33. imageview.startAnimation(animation);
  34. }
  35. });
  36. button2.setOnClickListener(new View.OnClickListener() {
  37. @Override
  38. public void onClick(View view) {
  42. imageview.startAnimation(animation2);
  43. }
  44. });
  45. }
  46. @Override
  47. public void onAnimationStart(Animation animation) {
  50. }
  52. @Override
  53. public void onAnimationEnd(Animation animation) {
  55. }
  57. @Override
  58. public void onAnimationRepeat(Animation animation) {
  60. }
  61. }
Step 5
When you run your project:
1.jpg
Step 6
After clicking on the zoomin button:
2.jpg
Step 7
After clicking on the zoomout button:
3.jpg
So in this article, you have learned how to perform zoom in and zoom out operations on Imaheview on a button click.