Zoom Image on image click Event

Question

I Want to Zoom image on image Click Event. How can I Do that. Here is 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:layout_height="fill_parent" android:layout_width="fill_parent" >

    <LinearLayout android:orientation="horizontal"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">

        <Button android:text="Button1" android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>
        <Button android:text="Button2" android:id="@+id/button2" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>
        <Button android:text="Button3" android:id="@+id/button3" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>

    </LinearLayout>

    <LinearLayout android:orientation="horizontal"
                  android:layout_height="290dp"
                  android:layout_width="wrap_content"
                  android:layout_gravity="center_horizontal">

             <ImageView android:id="@+id/contentImage"
                        android:layout_height="250dp" 
                        android:layout_width="200dp"
                        />


    </LinearLayout>

    <LinearLayout android:orientation="horizontal"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">

        <ImageView android:id="@+id/imageView1" android:src="@drawable/img1" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>
        <ImageView android:id="@+id/imageView2" android:src="@drawable/img2" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>
        <ImageView android:id="@+id/imageView3" android:src="@drawable/img3" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>

    </LinearLayout>

</LinearLayout>

Hear is my main File Image.java in which on Event will be handled

package com.example;


import android.app.Activity;

import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class Image extends Activity 
{
    public ImageView img1,img2,img3;
    ImageView contentImage;
    boolean click1=true;
    boolean click2=true;
    boolean click3=true;
    boolean imageTouch=false;



    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button btn1=(Button)findViewById(R.id.button1);
        Button btn2=(Button)findViewById(R.id.button2);
        Button btn3=(Button)findViewById(R.id.button3);

        img1=(ImageView)findViewById(R.id.imageView1);
        img2=(ImageView)findViewById(R.id.imageView2);
        img3=(ImageView)findViewById(R.id.imageView3);
        contentImage=(ImageView)findViewById(R.id.contentImage);

        img1.setAlpha(100);
        img2.setAlpha(100);
        img3.setAlpha(100);


        btn1.setOnClickListener(new View.OnClickListener()
        {

            @Override
            public void onClick(View arg0) 
            {
                    if (click1) 
                {
                    img1.setAlpha(255);
                    img2.setAlpha(100);
                    img3.setAlpha(100);
                    click1=false;
                } 
                else 
                {
                    img1.setAlpha(255);
                    img2.setAlpha(100);
                    img3.setAlpha(100);
                    click1=true;
                }

                contentImage.setImageDrawable(null);

            }

        });
        btn2.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View arg0) 
            {

                if (click2) 
                {
                    img1.setAlpha(100);
                    img2.setAlpha(255);
                    img3.setAlpha(100);
                    click2=false;
                } 
                else 
                {
                    img1.setAlpha(80);
                    img2.setAlpha(255);
                    img3.setAlpha(80);
                    click2=true;
                }
            contentImage.setImageDrawable(null);

            }

        }); 


        btn3.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View arg0) 
            {

                if (click3) 
                {
                    img1.setAlpha(100);
                    img2.setAlpha(100);
                    img3.setAlpha(255);
                    click3=false;
                } 
                else 
                {
                    img1.setAlpha(100);
                    img2.setAlpha(100);
                    img3.setAlpha(255);
                    click3=true;
                }
                contentImage.setImageDrawable(null);

            }

        });

      img1.setOnClickListener(new OnClickListener()
      {

        @Override
        public void onClick(View v)
        {

            if (click1) 
            {
                img1.setAlpha(255);
                img2.setAlpha(100);
                img3.setAlpha(100);
                click1=false;
            } 
            else 
            {
                img1.setAlpha(255);
                img2.setAlpha(100);
                img3.setAlpha(100);
                click2=true;
            }


            contentImage.setImageResource(R.drawable.img1);

        }
    });

      img2.setOnClickListener(new OnClickListener()
      {

        @Override
        public void onClick(View v)
        {
            if (click2) 
            {
                img1.setAlpha(100);
                img2.setAlpha(255);
                img3.setAlpha(100);
                click2=false;
            } 
            else 
            {
                img1.setAlpha(80);
                img2.setAlpha(255);
                img3.setAlpha(80);
                click2=true;
            }
            contentImage.setImageResource(R.drawable.img2);

        }
    });  
      img3.setOnClickListener(new OnClickListener() 
      {

        @Override
        public void onClick(View v)
        {
            if (click3) 
            {
                img1.setAlpha(100);
                img2.setAlpha(100);
                img3.setAlpha(255);
                click3=false;
            } 
            else 
            {
                img1.setAlpha(100);
                img2.setAlpha(100);
                img3.setAlpha(255);
                click3=true;
            }
            contentImage.setImageResource(R.drawable.img3);

        }
    });      

      contentImage.setOnClickListener(new OnClickListener() 
      {

        public void onClick(View v) 
        {
            try
            {
            Toast.makeText(Image.this,"hello",Toast.LENGTH_SHORT);
            contentImage.setMinimumHeight(400); 
            contentImage.setMinimumWidth(700);

            imageTouch=true;
            }
            catch(Exception e)
            {
                System.out.println("Exception Raise.......................");
            }
        }
    });

    }//onCreate Method over..... 


}

Answer 1

Thanks a Lot... Your code is useful for me...I have done my Work With Following Code..And Its Working

here is my code..

Main.Xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout android:orientation="horizontal"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">

    <Button android:text="Button1" android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>
    <Button android:text="Button2" android:id="@+id/button2" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>
    <Button android:text="Button3" android:id="@+id/button3" android:layout_height="wrap_content" android:layout_width="wrap_content" ></Button>

</LinearLayout>

<LinearLayout android:orientation="horizontal"
              android:layout_height="290dp"
              android:layout_width="wrap_content"
              android:layout_gravity="center_horizontal">

         <ImageView android:id="@+id/contentImage"
                    android:layout_height="fill_parent" 
                    android:layout_width="fill_parent"
                    android:scaleType="matrix" 
                    />


</LinearLayout>

<LinearLayout android:orientation="horizontal"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/imageView1" android:src="@drawable/img1" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>
    <ImageView android:id="@+id/imageView2" android:src="@drawable/img2" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>
    <ImageView android:id="@+id/imageView3" android:src="@drawable/img3" android:layout_height="75dp" android:layout_width="75dp" ></ImageView>

</LinearLayout>

Here is my main Activity File. Image.java

package com.example;


 import android.app.Activity;
 import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class Image extends Activity 
{
public ImageView img1,img2,img3;
public static ImageView contentImage;
boolean click1=true;
boolean click2=true;
boolean click3=true;
boolean imageTouch=false;
Context myContext=Image.this;
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
PointF start=new PointF();
PointF mid = new PointF();
float oldDist = 1f;


static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;

int mode = NONE;

public GestureDetector mDetector;

public void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    mDetector = new GestureDetector(Image.this,new MyGestureDetector(Image.this));

    Button btn1=(Button)findViewById(R.id.button1);
    Button btn2=(Button)findViewById(R.id.button2);
    Button btn3=(Button)findViewById(R.id.button3);

    img1=(ImageView)findViewById(R.id.imageView1);
    img2=(ImageView)findViewById(R.id.imageView2);
    img3=(ImageView)findViewById(R.id.imageView3);
    contentImage=(ImageView)findViewById(R.id.contentImage);


    img1.setAlpha(100);
    img2.setAlpha(100);
    img3.setAlpha(100);


    btn1.setOnClickListener(new View.OnClickListener()
    {

        @Override
        public void onClick(View arg0) 
        {
                if (click1) 
            {
                img1.setAlpha(255);
                img2.setAlpha(100);
                img3.setAlpha(100);
                click1=false;
            } 
            else 
            {
                img1.setAlpha(255);
                img2.setAlpha(100);
                img3.setAlpha(100);
                click1=true;
            }


        }

    });

    btn2.setOnClickListener(new View.OnClickListener(){

        @Override
        public void onClick(View arg0) 
        {

            if (click2) 
            {
                img1.setAlpha(100);
                img2.setAlpha(255);
                img3.setAlpha(100);
                click2=false;
            } 
            else 
            {
                img1.setAlpha(80);
                img2.setAlpha(255);
                img3.setAlpha(80);
                click2=true;
            }

        }

    }); 


    btn3.setOnClickListener(new View.OnClickListener(){

        @Override
        public void onClick(View arg0) 
        {

            if (click3) 
            {
                img1.setAlpha(100);
                img2.setAlpha(100);
                img3.setAlpha(255);
                click3=false;
            } 
            else 
            {
                img1.setAlpha(100);
                img2.setAlpha(100);
                img3.setAlpha(255);
                click3=true;
            }

        }

    });

  img1.setOnClickListener(new OnClickListener()
  {

    @Override
    public void onClick(View v)
    {

        if (click1) 
        {
            img1.setAlpha(255);
            img2.setAlpha(100);
            img3.setAlpha(100);
            click1=false;
        } 
        else 
        {
            img1.setAlpha(255);
            img2.setAlpha(100);
            img3.setAlpha(100);
            click2=true;
        }


        contentImage.setImageResource(R.drawable.img1);

    }
});

  img2.setOnClickListener(new OnClickListener()
  {

    @Override
    public void onClick(View v)
    {
        if (click2) 
        {
            img1.setAlpha(100);
            img2.setAlpha(255);
            img3.setAlpha(100);
            click2=false;
        } 
        else 
        {
            img1.setAlpha(80);
            img2.setAlpha(255);
            img3.setAlpha(80);
            click2=true;
        }
        contentImage.setImageResource(R.drawable.img2);

    }
});  
  img3.setOnClickListener(new OnClickListener() 
  {

    @Override
    public void onClick(View v)
    {
        if (click3) 
        {
            img1.setAlpha(100);
            img2.setAlpha(100);
            img3.setAlpha(255);
            click3=false;
        } 
        else 
        {
            img1.setAlpha(100);
            img2.setAlpha(100);
            img3.setAlpha(255);
            click3=true;
        }
        contentImage.setImageResource(R.drawable.img3);

    }
});      

  contentImage.setOnTouchListener(new View.OnTouchListener()
  {

    @Override
    public boolean onTouch(View v, MotionEvent event) 
    {

            ImageView view=(ImageView)v;
           System.out.println("matrix="+savedMatrix.toString());
           switch (event.getAction() & MotionEvent.ACTION_MASK) 
           {
           case MotionEvent.ACTION_DOWN:

               savedMatrix.set(matrix);
                 start.set(event.getX(), event.getY());
                 mode = DRAG;
                 break;


          case MotionEvent.ACTION_POINTER_DOWN:

                oldDist = spacing(event);

                 if (oldDist > 10f) 
                 {
                    savedMatrix.set(matrix);
                    midPoint(mid, event);
                    mode = ZOOM;
                 }
                 break;

           case MotionEvent.ACTION_UP:


           case MotionEvent.ACTION_POINTER_UP:
                 mode = NONE;

                 break;


           case MotionEvent.ACTION_MOVE:
                  if (mode == DRAG) 
                  {
                     matrix.set(savedMatrix);
                     matrix.postTranslate(event.getX() - start.x,
                     event.getY() - start.y);
                  }
                  else if (mode == ZOOM) 
                     {
                        float newDist = spacing(event);
                        if (newDist > 10f) 
                        {
                           matrix.set(savedMatrix);
                           float scale = newDist / oldDist;
                           matrix.postScale(scale, scale, mid.x, mid.y);
                        }
                     }
                  break;

           }
           view.setImageMatrix(matrix);


        return true;
    }
    private float spacing(MotionEvent event) 
    {
          float x = event.getX(0) - event.getX(1);
          float y = event.getY(0) - event.getY(1);
          return FloatMath.sqrt(x * x + y * y);
    }

    private void midPoint(PointF point, MotionEvent event) 
    {
          float x = event.getX(0) + event.getX(1);
          float y = event.getY(0) + event.getY(1);
          point.set(x / 2, y / 2);
       }
});

}//onCreate Method over..... 


}

Answer 2

http://vmustafayev4en.blogspot.in/2011/12/android-imageview-zoom-in-zoom-out.html

Answer 3

Did you try with a gallery and a image view ?

<RelativeLayout>
    <ImageView android:id="@+id/BigView" android:layout_width="XXdip" android:layout_height="XXdip" android:scaleType="fitCenter" />
    <Gallery android:id="@+id/MyGallery" android:unselectedAlpha="0.5" android:layout_below="@id/BigView" android:layout_height="XXdip" />
</RelativeLayout>

You have to specify a height to your gallery. And you add a OnItemSelectedListener.

final int[] p = {R.drawable.img1, R.drawable.img2, R.drawable.img3, ...};
final ImageView i = (ImageView) findViewById(R.id.BigView);
Gallery g = (Gallery) findViewById(R.id.MyGallery);
g.setAdapter(...);
g.setOnItemSelectedListener(new OnItemSelectedListener() {
    public void onItemSelected (AdapterView<?> parent, View view, int position, long id) {
        i.setImageResource(p[position]);
        // Maybe you can try
        // i.setImageDrawable(((ImageView) view).getDrawable());
    }
});

With the scaleType fitCenter your image will be fit to the ImageView size kepping the aspect ratio. So set directly the big size.

Otherwise you can add an ImageView in the RelativeLayout in fill_parent both layout size and set the visibility to gone, add :

i.setOnClickListener(new OnClickLisyener() {
    MyHiddenImageView.setImageResource(p[g.getSelectedItemPosition()]);
    MyHiddenImageView.setVisibility(View.VISIBLE);
});

Answer 4

When you touch or click on the image it starts zooming, this type of zooming animation can be used in photo gallery. To make zoom in image in XML layout file two ImageView components are used; one for thumbnail and another for large image. The large imageview is for full screen size and small imageview is for thumbnail size.here