-> 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);
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.
.jpg "scrollview icon")
