ZoomControls in Android | AndroidMonks

ZoomControls in Android with Example

How often have you seen the +- button that depicts the ZoomControls action in Android Apps. These are a major part of creating a Book reader, or a e-shopping applications. The need for Zoom Controls was very high after the use of high quality images, because people wanted to zoom in and out Pictures. There is a very simple class that provides this feature in Android.

The ZoomControls class displays a simple set of controls used for zooming and provides callbacks to register for events.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

We will see the implementation of this class in Android.

ZoomControls – Basic Implementation

You will be making use of the class ZoomControls like below.

<ZoomControls
android:id="@+id/simpleZoomControl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

This gives the control like,

ZoomControls
ZoomControls

Just like all other views, Zoom Controls has the default property layout_width and layout_height. Check out more about the general Attributes to a view here.

ZoomControls – Public Methods

  • onTouchEvent(MotionEvent event) – Implement this method when there is a need to handle touch events.  According to google docs, “If this method is used to detect click actions, it is recommended that the actions be performed by implementing and calling performClick()“. Here performClick() is a base class’ (View) public method. It has better callback mechanism when compared to onTouchEvent()
  • hasFocus() – Returns true if this view has or contains focus
  • hide() – When there is a need to hide the zoom controls (Sometimes the user may create a continuous scroll/swipe motion. Handling those gestures and hiding zoom controls in that case provides better UI experience)
  • setIsZoomInEnabled(boolean isEnabled) – Boolean Property, that returns True if Zoom in is enabled or not
  • setIsZoomOutEnabled(boolean isEnabled) – Boolean Property, that return True if Zoom out is enabled or not
  • setOnZoomInClickListener(View.OnClickListener listener) – This callback is fired when the + (Zoom in) is pressed. Handling the zoom in is upto the developer.
  • setOnZoomOutClickListener(View.OnClickListener listener) – This callback is fired when the – (Zoom out) is pressed. Handling the zoom out is upto the developer.

ZoomControls – Activity Implementation

To create the Activity, we can make use of the ZoomControl class as we saw in the first section.

The Call back can be used similar to a button press, however, the zoom action that we want is upto the developer. We will have to create the logic to zoom the item we want to apply the zoom controls on.

We will try to zoom in and out an image using the Zoom Controls like below.

Example activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Example Zoom Controls"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/monk"
        android:id="@+id/imageToControl"/>
    <ZoomControls
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/zoomControls"/>

</LinearLayout>

MainActivity.java

package com.example.baradwav.samplemymanh;

import android.media.Image;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ZoomControls;

public class MainActivity extends AppCompatActivity {

    ImageView imageToControl;
    ZoomControls zoomControls;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageToControl = findViewById(R.id.imageToControl);
        zoomControls = findViewById(R.id.zoomControls);
        zoomControls.setOnZoomInClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                float x = imageToControl.getScaleX();
                float y = imageToControl.getScaleY();
                // set increased value of scale x and y to perform zoom in functionality
                imageToControl.setScaleX((float) (x + 0.5));
                imageToControl.setScaleY((float) (y + 0.5));
            }
        });
        zoomControls.setOnZoomOutClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                float x = imageToControl.getScaleX();
                float y = imageToControl.getScaleY();
                // set decreased value of scale x and y to perform zoom out functionality
                imageToControl.setScaleX((float) (x - 0.5));
                imageToControl.setScaleY((float) (y - 0.5));
            }
        });
    }
}
Final Application

The resulting Application looks like this,

ZoomControl Action
ZoomControl Action

Drop in any comments you have below.

“Learn and Be Curious”

 

 

Also Read  RecyclerView & Adapter - CardView Implementation

Leave a Comment

Your email address will not be published. Required fields are marked *