20 January 2015

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.
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.
ZoomDemo com.mia.zoomdemo

Step 3 : Drag an ImageView into the layout from Palette as shown below.
drag imageview from palette
It will ask for an image source. Click on ic_launcher and then OK.
ic_launcher OK

Step 4 : Also drag ZoomControls to the layout as shown below.
drag zoomcontrols
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
zoom controls output
zoom controls output

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);
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.
Github download
 Stay Tuned with Made In Android

Previous Page Next Page Home
Top