ImageView in Android is used to display images of different formats. Images are set according to the size of ImageView irrespective of the size of the image. However, ImageView does not provide a provision to zoom in or zoom out of the image.
So in this article, we will show you how you could create a program to zoom in and zoom out of an image in Android. Follow the below steps once the IDE is ready.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add an ImageView to display the image.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< ImageView
android:id = "@+id/image_view_1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:src = "@drawable/img" />
</ RelativeLayout >
|
Step 3: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
package org.geeksforgeeks.imageviewzoom
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MotionEvent
import android.view.ScaleGestureDetector
import android.widget.ImageView
import kotlin.math.max
import kotlin.math.min
class MainActivity : AppCompatActivity() {
// Declaring GestureDetector,
// ScalingFactor and ImageView
private lateinit var mScaleGestureDetector: ScaleGestureDetector
private var mScaleFactor = 1 .0f
private lateinit var mImageView: ImageView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initializing the ImageVIew and GestureDetector
mImageView = findViewById(R.id.image_view_1)
mScaleGestureDetector = ScaleGestureDetector( this , ScaleListener())
}
// When touched, GestureDetector records the motion event
override fun onTouchEvent(motionEvent: MotionEvent): Boolean {
mScaleGestureDetector.onTouchEvent(motionEvent)
return true
}
// Zooming in and out in a bounded range
private inner class ScaleListener : ScaleGestureDetector.SimpleOnScaleGestureListener() {
override fun onScale(scaleGestureDetector: ScaleGestureDetector): Boolean {
mScaleFactor *= scaleGestureDetector.scaleFactor
mScaleFactor = max( 0 .1f, min(mScaleFactor, 10 .0f))
mImageView.scaleX = mScaleFactor
mImageView.scaleY = mScaleFactor
return true
}
}
} |
Output:
You can see that we are able to zoom in and out.