ZoomControls in Android with Example
In Android, Zoom Control is a class that has some set of methods that are used to control the zoom functionality. It has two buttons that are used to control the zoom functionality (ie Zoom In and Zoom Out). Zoom Control Class has been deprecated in API Version 29. The functionalities offered by ZoomControls class are handled in a better way through Custom view and custom layouts then dedicated zoom controls widgets.
Important Methods of Zoom Controls
- Let say ZoomControls be the reference of ZoomControl class which is being used to call the different method of ZoomControls class.
ZoomControl zoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl);
- show(): This method is used to show the zoom controls on the App UI.
// will show the zoom controls
zoomControls.show()
- hide(): This method is used to hide the zoom controls on the App UI.
// will hide the zoom controls
zoomControls.hide()
- setOnZoomInClickListener(OnClickListenerlistener): This method is invoked when Zoom In button is pressed. It is used to customize the UI that will be shown when the zoom-in button is being pressed.
zoomControls.setOnZoomInClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// add the code which will be executed when
// the zoom in button has been pressed
}
});
- setOnZoomOutClickListener(OnClickListenerlistener): This method is invoked when Zoom Out is pressed. It too works in the same manner as the setOnZoomInClickListener() method works, but it minimizes ie converges the UI.
zoomControls.setOnZoomOutClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// add the code which will be executed when
// the zoom out button has been pressed
}
});
- setIsZoomInEnabled(boolean isEnabled): It is one of the methods of Zoom Controls which is used to enable or disable the zoom-in functionality.
// it will enable the zoomIn button
zoomControls.setIsZoomInEnabled(true)
// it will disable the zoomIn button
zoomControls.setIsZoomInEnabled(false)
- setIsZoomOutEnabled(boolean isEnabled): It is also one of the methods of Zoom Controls, which is used to enable or disable the zoom out functionality.
// it will enable the zoomOut button
zoomControls.setIsZoomOutEnabled(true)
// it will disable the zoomOut button
zoomControls.setIsZoomOutEnabled(false)
- setZoomSpeed(long speed): This is used to set the zoom speed of the zoom that is being done with zoom controls
Important Attributes of Zoom Controls
- id: This attribute is used to give the zoom controls a unique identity.
<ZoomControls android:id=”@+id/zoom_controls/>
- background: This is used to give the background color to the zoom controls.
<ZoomControls
android:id=”@+id/zoom_controls
android:background=”#fffff”/>
- padding: This is used to give padding on the sides of zoom controls.
<ZoomControls
android:id=”@+id/zoom_controls
android:padding=”20dp”/>
Example
A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using both Java and Kotlin language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
Now go to the activity_main.xml file which represents the UI of the application. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<? 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"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:scaleType = "fitXY"
android:src = "@drawable/indiamap" />
< ZoomControls
android:id = "@+id/zoom_controls"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentEnd = "true"
android:layout_alignParentBottom = "true"
android:layout_margin = "10dp" />
</ RelativeLayout >
|
Step 3: Working with the MainActivity file
Go to the MainActivity file, and refer to the following code. Below is the code for the both MainActivity.kt and MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
image_View.setOnTouchListener { v, m ->
zoom_controls.show()
false
}
zoom_controls.setOnZoomInClickListener(
View.OnClickListener {
val x: Float = image_View.getScaleX()
val y: Float = image_View.getScaleY()
image_View.setScaleX((x + 0 .5f) as Float)
image_View.setScaleY((y + 0 .5f) as Float)
zoom_controls.hide()
}
)
zoom_controls.setOnZoomOutClickListener(
View.OnClickListener {
val x: Float = image_View.getScaleX()
val y: Float = image_View.getScaleY()
if (x == 1f && y == 1f) {
image_View.setScaleX(x as Float)
image_View.setScaleY(y as Float)
zoom_controls.hide()
} else {
image_View.setScaleX((x - 0 .5f) as Float)
image_View.setScaleY((y - 0 .5f) as Float)
zoom_controls.hide()
}
}
)
}
}
|
Java
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.ZoomControls;
public class MainActivity extends AppCompatActivity {
ImageView imageView;
ZoomControls zoomControls;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView=findViewById(R.id.image_View);
zoomControls=findViewById(R.id.zoom_controls);
zoomControls.setBackgroundColor(Color.BLACK);
zoomControls.show();
imageView.setOnTouchListener(
new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
zoomControls.show();
return false ;
}
}
);
zoomControls.setOnZoomInClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
float x=imageView.getScaleX();
float y=imageView.getScaleY();
imageView.setScaleX(( float )(x+ 0 .5f));
imageView.setScaleY(( float )(y+ 0 .5f));
zoomControls.hide();
}
}
);
zoomControls.setOnZoomOutClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
float x=imageView.getScaleX();
float y=imageView.getScaleY();
if (x== 1 && y== 1 )
{
imageView.setScaleX(( float )(x));
imageView.setScaleY(( float )(y));
zoomControls.hide();
}
else
{
imageView.setScaleX(( float )(x- 0 .5f));
imageView.setScaleY(( float )(y- 0 .5f));
zoomControls.hide();
}
}
}
);
}
}
|
Output
Last Updated :
23 Feb, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...