Implement Zoom In or Zoom Out in Android

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.
zoom-inout

XML Attributes of Scale Tag

The characteristics of Zoom In and Zoom Out animations are defined in the XML files by using scale tag.

XML attribute Description
android:duration Used to define the duration of the animation in millisecond
android:fromXScale Used to set initial size of the view in X-axis
android:fromYScale Used to set initial size of the view in Y-axis
android:pivotX To define the X coordinate of the point about which the object is being zoom in/out
android:pivotY To define the Y coordinate of the point about which the object is being zoom in/out
android:toXScale Used to set final size of the view in X-axis
android:toYScale Used to set final size of the view in Y-axis

How to Add Zoom In/Out Animation in Android

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



  1. Click on File, then New => New Project.
  2. Select language as Kotlin.
  3. Select the minimum SDK as per your need.

Step 2: Modify activity_main.xml file

Below is the code for activity_main.xml file to add a TextView, ImageView and two Buttons in an activity.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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>

chevron_right


Step 3: Define XML file for Zoom In and Zoom Out animation of the image

Create 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.

zoom_in.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
    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>

chevron_right


zoom_out.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
    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>

chevron_right


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 file

Below 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.

MainActivity.kt

filter_none

edit
close

play_arrow

link
brightness_4
code

package com.example.zomminout
   
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import 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)
   
        // assiging 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)
        }
    }
}

chevron_right


Step 5: Modify strings.xml file

All the strings which are used in the activity are listed in this file.

strings.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output: Run on Emulator




My Personal Notes arrow_drop_up

Android Developer(Java, Kotlin), Technical Content Writer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.