Monday, March 21, 2011

Zooming a view completely

Here I'm discussing how to zoom a complete view with different UI controls in it.
For this i used setScaleX and setScaleY.

mainView.setScaleX(scaleX);
mainView.setScaleY(scaleY);
 
This will Scale the the view in X and Y axis. A value of scale 1 means that no scaling is applied.
In order to work this correctly it need to specify the pivot point correctly. We can set our pivot point using setPivotX and setPivotY.

mainView.setPivotX(pivot.x);
mainView.setPivotY(pivot.y);
 
My complete code 

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:id="@+id/linearLayout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <Button
   android:text="Zoom In"
   android:id="@+id/buttonZoomIn"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Normal"
   android:id="@+id/buttonNormal"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Zoom Out"
   android:id="@+id/buttonZoomOut"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 </LinearLayout>
 <TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/hello" />
 <ProgressBar
  android:id="@+id/progressBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <ImageView
  android:id="@+id/imageView"
  android:src="@drawable/honeycombdroid"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <LinearLayout
  android:layout_width="200dp"
  android:orientation="vertical"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <Button
   android:text="Button"
   android:id="@+id/button2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"></Button>
 </LinearLayout>
</LinearLayout>
 

Here me only use that three buttons
buttonZoomIn , buttonNormal and buttonZoomOut
Then My main activity class

public class ZoomLayout extends Activity {
 View mainView = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mainView =(LinearLayout)findViewById(R.id.linearLayout);
  
  Button buttonZoomOut = (Button)findViewById(R.id.buttonZoomOut);
  Button buttonNormal = (Button)findViewById(R.id.buttonNormal);
  Button buttonZoomIn = (Button)findViewById(R.id.buttonZoomIn);
  
  buttonZoomOut.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(0.5f,0.5f,new PointF(0,0));    
   }
  });
  buttonNormal.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(1f,1f,new PointF(0,0));  
   }
  });
  buttonZoomIn.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(2f,2f,new PointF(0,0));   
   }
  });
 }
 
 /** zooming is done from here */
 public void zoom(Float scaleX,Float scaleY,PointF pivot){
  mainView.setPivotX(pivot.x);
  mainView.setPivotY(pivot.y);  
  mainView.setScaleX(scaleX);
  mainView.setScaleY(scaleY);  
 } 
}
buttonZoomOut
Here zoom is the main function for zooming

16 comments:

  1. this coding is not working plaese provide me correct solution to zooming gallery of images

    ReplyDelete
  2. These is not for zooming an images. It is used to zoom a layout with different UI elements..
    And this setScaleX is available only from API Level 11

    ReplyDelete
  3. And how we can zoom a LinearLayout for the API Level 9 :( ?? Any idea?

    ReplyDelete
  4. que bosta q não funciona

    ReplyDelete
  5. i have developed an application in which i made a gallery of images and in output when i zoom an image , it will get enlarged but when i click on another image, then it gets enlarged by default (its scales would be of last enlarged image's). so help me out.

    ReplyDelete
  6. When I insert videoview into this code the video does not play in zoom in or zoom out. It only play in normal view

    ReplyDelete
  7. mainView.setPivotX(pivot.x);
    mainView.setPivotY(pivot.y);
    mainView.setScaleX(scaleX);
    mainView.setScaleY(scaleY);
    is not working sir why?

    ReplyDelete
  8. please why
    mainView.setPivotX(pivot.x);
    mainView.setPivotY(pivot.y);
    mainView.setScaleX(scaleX);
    mainView.setScaleY(scaleY);
    is showing error

    ReplyDelete
  9. error
    The method setPivotX(float) is undefined for the type View

    ReplyDelete
  10. I got it this method is working api level android 3.0.0

    ReplyDelete
  11. Thanks for the tutorial. I have successfully implemented zoom functionality.

    Now when I zoom i want to enable dragging so that I can view complete layout in zoomed mode.

    Can you help me with the same ?

    ReplyDelete
  12. Hi Labeeb, I'm new to Java. I'm trying out your code and it gave an error "LinearLayout cannot be resolved to a type." at
    mainView =(linearLayout)findViewById(R.id.linearLayout);

    I've copied your code on to a new project exactly. Can you help me why I'm getting this error?

    Thank you,

    Tim

    ReplyDelete
  13. Only to API level 11 or higher

    ReplyDelete
  14. yes, i need to zoom layout,
    How can i use this as double tap and also pinch zoom, Without using Buttons?

    ReplyDelete