android - 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

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);
});