Zoom Controls for Android

What we will do ?

-> We will choose an image and apply zoom-in and zoom-out function on it.

What we will need?

• ImageView(with Image)
• Zoom Controls
• Java Code in MainActivity.java

Step 1: Create a new Project by clicking on File->New->Android Application Project.

Step 2 : Give a name to the application (ZoomDemo) and also a package name(mia).Then click on Next ..Next and then click Finish.

Step 3 : Drag an ImageView into the layout from Palette as shown below.

It will ask for an image source. Click on ic_launcher and then OK.

Step 4 : Also drag ZoomControls to the layout as shown below.

The code for activity_main.xml is shown below.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

    <ZoomControls
        android:id="@+id/zoomControls1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp" />

</RelativeLayout>

Step 5 : Code for MainActivity.java found in src->com.mia.zoomdemo folder is shown below.

MainActivity.java

package com.mia.zoomdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.ZoomControls;

public class MainActivity extends Activity {
    
    ImageView img;
    ZoomControls zoom;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        img = (ImageView) findViewById(R.id.imageView1);
        zoom = (ZoomControls) findViewById(R.id.zoomControls1);
        
        zoom.setOnZoomInClickListener(new View.OnClickListener() {
            
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            
            int w = img.getWidth();
            int h = img.getHeight();
            
            RelativeLayout.LayoutParams params = 
                new RelativeLayout.LayoutParams(w + 10, h +10);
            params.addRule(RelativeLayout.CENTER_IN_PARENT);
            
            img.setLayoutParams(params);
        }
    });
        
        zoom.setOnZoomOutClickListener(new View.OnClickListener() {
            
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            
            int w = img.getWidth();
            int h = img.getHeight();
            
            RelativeLayout.LayoutParams params = 
                new RelativeLayout.LayoutParams(w - 10, h -10);
            params.addRule(RelativeLayout.CENTER_IN_PARENT);
            
            img.setLayoutParams(params);
        }
    });
    }

}

Step 6 : Run the Project

Explanation of the Code:

Explanation from activity_main.xml:

• We have added an image using ImageView with id as imageView1 and a ZoomControls with id as zoomControls1

<ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

    <ZoomControls
        android:id="@+id/zoomControls1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp" />

Explanation from MainActivity.java

• We create variables of type ImageView and ZoomControls as img and zoom.

ImageView img;
ZoomControls zoom;

•  We link the ImageView from activity_main.xml to the variable and same for ZoomControls using method findViewById().

img = (ImageView) findViewById(R.id.imageView1);
        zoom = (ZoomControls) findViewById(R.id.zoomControls1);

•  We define method setOnZoomInClickListener() for action on ZoomOut button which overrides the onClick() method.

zoom.setOnZoomInClickListener(new View.OnClickListener() {
            
        @Override
        public void onClick(View v) {

• We define value of integer variables w and h using getWidth() and getHeight() methods.

int w = img.getWidth();
            int h = img.getHeight();

•  LayoutParams is used to play with size of elements in the RelativeLayout.

RelativeLayout.LayoutParams params = 
                new RelativeLayout.LayoutParams(w + 10, h +10);

• addRule() method is used for placing the image in center of the page while zooming in or out.

params.addRule(RelativeLayout.CENTER_IN_PARENT); 
            img.setLayoutParams(params);

• Same methods are used for Zoom Out control.

 Stay Tuned with Made In Android