Implement Zoom In or Zoom Out in Android

06 Oct, 2021
Zoom In and Zoom Out animations are used to enlarge and reduce the size of a view in Android applications respectively. These types of animations are often used by developers to provide a dynamic nature to the applications. Users also feel the changes happening in the application by watching these kinds of animations. 
The characteristics of Zoom In and Zoom Out animations are defined in the XML files by using scale tag. 
The following example demonstrates the steps involved in implementing Zoom In and Zoom Out animation to an image file. An image file will be added in the activity using ImageView.
Note: Following steps are performed on Android Studio version 4.0  
Step 1: Create new project 
Click on File, then New => New Project.Select language as Kotlin.Select the minimum SDK as per your need.
Click on File, then New => New Project.
Select language as Kotlin.
Select the minimum SDK as per your need.
Step 2: Modify activity_main.xml fileBelow is the code for activity_main.xml file to add a TextView, ImageView and two Buttons in an activity.
Filename: activity_main.xml
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#168BC34A"    tools:context=".MainActivity" >     <TextView        android:id="@+id/textView"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:fontFamily="@font/roboto"        android:text="@string/heading"        android:textAlignment="center"        android:textColor="@android:color/holo_green_light"        android:textSize="36sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.060000002" />     <ImageView        android:id="@+id/imageView"        android:layout_width="179dp"        android:layout_height="172dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/textView"        app:layout_constraintVertical_bias="0.31"        app:srcCompat="@drawable/logo" />     <Button        android:id="@+id/zoomInButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#AB4CAF50"        android:fontFamily="@font/roboto"        android:padding="5dp"        android:text="@string/zoomInButtonText"        android:textSize="18sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toStartOf="@+id/zoomOutButton"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/imageView"        app:layout_constraintVertical_bias="0.76" />     <Button        android:id="@+id/zoomOutButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#AB4CAF50"        android:fontFamily="@font/roboto"        android:padding="5dp"        android:text="@string/zoomOutButtonText"        android:textSize="18sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.77"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/imageView"        app:layout_constraintVertical_bias="0.76" /></androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Define XML file for Zoom In and Zoom Out animation of the imageCreate a new directory in the res folder of the application through right-click on res => New => Android Resource Directory. Select Resource Type as anim and Directory name should also be anim. In this directory create 2 Animation Resource File namely zoom_in and zoom_out. These 2 files are the XML file which holds the details of the animation. Below is the code for both the file.
Filename: zoom_in.xml
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter = "true">     <scale        xmlns:android = "http://schemas.android.com/apk/res/android"        android:duration = "1000"        android:fromXScal = "1"        android:fromYScale = "1"        android:pivotX = "50%"        android:pivotY = "50%"        android:toXScale = "2"        android:toYScale = "2"/> </set>
Filename: zoom_out.xm
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:fillAfter = "true">     <scale        xmlns:android="http://schemas.android.com/apk/res/android"        android:duration = "2500"        android:fromXScale = "1"        android:fromYScale = "1"        android:pivotX = "50%"        android:pivotY = "50%"        android:toXScale = ".2"        android:toYScale = ".2" /> </set>
The android:fillAfter attribute under set tag is used to fix the final size of the image file until any other animation happens.  
Step 4: Modify MainActivity.kt fileBelow is the code for MainActivity.kt file to load and start the animation on the ImageView widget according to the button clicked by the user.
Filename: MainActivity.kt
Java
package com.example.zomminout  import android.os.Bundleimport android.view.animation.AnimationUtilsimport android.widget.Buttonimport android.widget.ImageViewimport androidx.appcompat.app.AppCompatActivity    class MainActivity : AppCompatActivity() {      override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)          // assigning id of the button        // which zoom in the image        val buttonZoomIn: Button = findViewById(R.id.zoomInButton)          // assigning id of the button        // which zoom out the image        val buttonZoomOut: Button = findViewById(R.id.zoomOutButton)          // assigning id of imageview on        // which zoom in/out will be performed        val image: ImageView = findViewById(R.id.imageView)          // actions to be performed when        // "Zoom In" button is clicked        buttonZoomIn.setOnClickListener() {              // loading the animation of            // zoom_in.xml file into a variable            val animZoomIn = AnimationUtils.loadAnimation(this,                                                R.anim.zoom_in)            // assigning that animation to            // the image and start animation            image.startAnimation(animZoomIn)        }          // actions to be performed when        // "Zoom Out" button is clicked        buttonZoomOut.setOnClickListener() {              // loading the animation of            // zoom_out.xml file into a variable            val animZoomOut = AnimationUtils.loadAnimation(this,                                                R.anim.zoom_out)              // assigning that animation to            // the image and start animation            image.startAnimation(animZoomOut)        }    }}
Step 5: Modify strings.xml fileAll the strings which are used in the activity are listed in this file.
Filename: strings.xml
XML
<resources>    <string name="app_name">ZoomInOut</string>    <string name="heading">Zoom In/Out in Android</string>    <string name="zoomOutButtonText">Zoom Out</string>    <string name="zoomInButtonText">Zoom In</string></resources>
gulshankumarar231
Android-Animation
Picked
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Navigation Drawer in Android
How to Create and Add Data to SQLite Database in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Kotlin Array
How to Add Views Dynamically and Store Data in Arraylist in Android?
Retrofit with Kotlin Coroutine in Android