Open In App

ZoomControls in Android with Example

Improve
Improve
Like Article
Like
Save
Share
Report

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.

ZoomControls in Android

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. 

ZoomControls in Android

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 
    xmlns:tools="http://schemas.android.com/tools"
    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




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




// 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();
                        }
                    }
                }
        );
    }
}


Output



Last Updated : 23 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads