In android, Zoom In and Zoom Out animations are used to change the appearance and behavior of the objects over a particular interval of time. The Zoom In and Zoom Out animations will provide a better look and feel for our applications.
Generally, the animations are useful when we want to notify users about the changes happening in our app, such as new content loaded or new actions available, etc.
To create an animation effect on the objects in our android application, we need to follow below steps.
We need to create an XML file that defines the type of animation to perform in a new folder anim under res directory (res à anim à zoom_in.xml) with the required properties. In case, if anim folder does not exist in res directory, create a new one.
To use Zoom In or Zoom Out animations in our android applications, we need to define new XML files with <scale> tag like as shown below.
For Zoom In animation, we need to set android:pivotX="50%" and android:pivotY="50%" to perform the zoom from the centre of the element. Also, we need to use fromXScale, fromYScale attributes to define the scaling of an object and we need keep these values lesser than toXScale, toYScale like as shown below.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="2"
android:fromYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="4"
android:toYScale="4" >
</scale>
</set>
Zoom Out animation is same as Zoom In animation but fromXScale, fromYScale attribute values must be greater than toXScale, toYScale like as shown below.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale=".2"
android:toYScale=".2" />
</set>
Once we are done with creation of required animation XML files, we need to load those animation files using different properties.
In android, we can perform animations by using AnimationUtils component methods such as loadAnimation(). Following is the code snippet of loading and starting an animation using loadAnimation() and startAnimation() methods.
Animation aniSlide = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in);
img.startAnimation(aniSlide);
If you observe above code snippet, we are adding an animation to the image using loadAnimation() method. The second parameter in loadAnimation() method is the name of our animation xml file.
Here we used another method startAnimation() to apply the defined animation to imageview object.
Now we will see how to implement zoom in and zoom out animations for imageview on button click in android applications with examples.
Following is the example of implementing a zoom in and zoom out animations to change the image size on button click in android applications.
Create a new android application using android studio and give names as ZoomInOutExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.
Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView android:id="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:src="@drawable/bangkok"/>
<Button
android:id="@+id/btnZoomIn"
android:layout_below="@+id/imgvw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Zoom In" android:layout_marginLeft="100dp" />
<Button
android:id="@+id/btnZoomOut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btnZoomIn"
android:layout_toRightOf="@+id/btnZoomIn"
android:text="Zoom Out" />
</RelativeLayout>
As discussed, we need to create an xml files to define zoom in and zoom out animations in new folder anim under res directory (res à anim à zoom_in.xml, zoom_out.xml) with required properties. In case anim folder not exists in res directory, create a new one.
Following is the example of creating an XML files (zoom_in.xml, zoom_out.zml) under anim folder to define zoom in / out animation properties.
Now open zoom_in.xml file and write the code to set zoom in animation properties like as shown below
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="2"
android:fromYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="4"
android:toYScale="4" >
</scale>
</set>
Now open zoom_out.xml file and write the code to set zoom out animation properties like as shown below
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale=".2"
android:toYScale=".2" />
</set>
Now open your main activity file MainActivity.java from \java\com.tutlane.zoominoutexample path and write the code like as shown below.
package com.tutlane.zoominoutexample;
import android.media.Image;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
private Button btnzIn;
private Button btnzOut;
private ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnzIn = (Button)findViewById(R.id.btnZoomIn);
btnzOut = (Button)findViewById(R.id.btnZoomOut);
img = (ImageView)findViewById(R.id.imgvw);
btnzIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animZoomIn = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in);
img.startAnimation(animZoomIn);
}
});
btnzOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animZoomOut = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
img.startAnimation(animZoomOut);
}
});
}
}
If you observe above code, we are adding an animation to the image using loadAnimation() method and used startAnimation() method to apply the defined animation to imageview object.
When we run the above program in android studio we will get the result as shown below.
If you observe the above result, whenever we are clicking on Zoom In or Zoom Out buttons, the image size varies based on our functionality.
This is how we can implement zoom in and zoom out animations for imageview in android applications based on our requirements.