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 version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--Adding the image view-->
<ImageView
android:id="@+id/image_View"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/indiamap" />
<!--Adding the Zoom Controls
within the relative layout-->
<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 code to implement the zoom controls 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)
// onTouch listener function when the image is clicked
image_View.setOnTouchListener { v, m -> // Perform tasks here
zoom_controls.show()
false
}
// This function will be automatically called out,when
// zoom in button is being pressed
zoom_controls.setOnZoomInClickListener(
View.OnClickListener {
val x: Float = image_View.getScaleX()
val y: Float = image_View.getScaleY()
// setting the new scale
image_View.setScaleX((x + 0.5f) as Float)
image_View.setScaleY((y + 0.5f) as Float)
zoom_controls.hide()
}
)
// This function will be called when
// zoom out button is pressed
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 {
// setting the new scale
image_View.setScaleX((x - 0.5f) as Float)
image_View.setScaleY((y - 0.5f) as Float)
// hiding the zoom controls
zoom_controls.hide()
}
}
)
}
} |
// Java code to implement the zoom controls 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();
// onTouch listener function when the image is clicked
imageView.setOnTouchListener(
new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
zoomControls.show();
return false;
}
}
);
// This function will be automatically called out,when
// zoom in button is being pressed
zoomControls.setOnZoomInClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
float x=imageView.getScaleX();
float y=imageView.getScaleY();
// setting the new scale
imageView.setScaleX((float)(x+0.5f));
imageView.setScaleY((float)(y+0.5f));
zoomControls.hide();
}
}
);
// This function will be called when
// zoom out button is pressed
zoomControls.setOnZoomOutClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
float x=imageView.getScaleX();
float y=imageView.getScaleY();
if(x==1 && y==1)
{
// the scale will remain same,since
// it is maximum possible zoom out
imageView.setScaleX((float)(x));
imageView.setScaleY((float)(y));
zoomControls.hide();
}
else
{
// setting the new scale
imageView.setScaleX((float)(x-0.5f));
imageView.setScaleY((float)(y-0.5f));
// hiding the zoom controls
zoomControls.hide();
}
}
}
);
}
} |