CODEWITHSUNDEEP
androidimageviewonclicklistener
Joan Carles
Joan Carles

Reputation: 303

Android: How to divide ImageView into chunks and assign them onClickListener

I need to divide an image (ImageViewer) into chunks and assign them the onClick event listener. For divide the image, I use the next code:

private void splitImage(ImageView image, int rows, int cols) {  

    //For height and width of the small image chunks 
    int chunkHeight,chunkWidth;

    //To store all the small image chunks in bitmap format in this list 
    ArrayList<Bitmap> chunkedImages = new ArrayList<Bitmap>(rows * cols);

    //Getting the scaled bitmap of the source image
    BitmapDrawable drawable = (BitmapDrawable) image.getDrawable();
    Bitmap bitmap = drawable.getBitmap();
    Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true);

    chunkHeight = bitmap.getHeight()/rows;
    chunkWidth = bitmap.getWidth()/cols;

    //xCoord and yCoord are the pixel positions of the image chunks
    int yCoord = 0;
    for(int x=0; x<rows; x++){
        int xCoord = 0;
        for(int y=0; y<cols; y++){
            chunkedImages.add(Bitmap.createBitmap(scaledBitmap, xCoord, yCoord, chunkWidth, chunkHeight));
            xCoord += chunkWidth;
        }
        yCoord += chunkHeight;
    }       
}

But with this function only I get an array of Bitmaps and them not accept the OnClickListener. What I do is reconstruct the image with the chunks and be able to zoom in on the selected chunk.

Any idea?

Thanks in advance.

Upvotes: 2

Views: 1609

Answers (3)

Dodge
Dodge

Reputation: 8307

If it is a single image that cant be splitted into mutliple images, you could add a on Touch handler to the to the image view and check the x/y coords

for example in your touch handler

boolean onTouch(View v, MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
        if (ev.getPointerCount() > 0) {
            int w = v.getWidth();
            int h = v.getHeight();
            float eX = ev.getX(0);
            float eY = ev.getY(0);
            int x = (int) (eX / w * 100);
            int y = (int) (eY / h * 100);
            // x and y would be % of the image.
            // so you can say cell 1 is x < 25, y < 25 for a 4x4 grid

            // TODO add a loop or something to use x and y to detect the touched segment
        }
    }
    return true;
}

you also could change the int x and y to float x and y to be more precise.

sample code for the TODO

//somewhere in your code..
int ROWS = 5;
int COLS = 5;

// in the place of the TODO...
int rowWidht = 100/ROWS;
int colWidht = 100/COLS;

int touchedRow = x / rowWidth; // should work, not tested!
int touchedcol = y / colWidth; // should work, not tested!

cellTouched(touchedRow, touchedCol);

where cellTouched() is your method where you handle the touch... (here you also could use float)

Upvotes: 5

zbr
zbr

Reputation: 7037

And do you actually need to split the image? I would just set an OnTouchListener on to the whole image. From inside that, you can get the coordinates of the touch event. Then you do some math and you should be able to know which part of the image to zoom on.

Upvotes: 0

Pragnesh Soni
Pragnesh Soni

Reputation: 307

You can use grid view to making chunks of you images and set onClickListener on it.

Upvotes: 0

Related Questions