Android ImageView Coordinate Clicking

Question

I have a ViewPager screenslide I am implementing in my app. There are parts of images I want the user to be able to click on to open a dialog box or a website. When I was working with iOS, I did a workaround where I found the coordinates of the images on each device I was planning the user to have. This was not the best way obviously but back then I didn't plan straight on for an Android version. Now, the situation has changed and I'm starting to think this implementation would be very tedious and not practical, especially with so many Android devices out there. What would be the best way to be able to click on these parts of the images without using coordinates and hardcoding locations? Any help is appreciated! Thanks

EDIT: Here's a picture example (excuse my horrible computer drawing skills)... The black box represents the android device screen, the red box represents the whole image, the green, yellow, and blue colored boxes are the parts I want to be able to click on. Let me know if this isn't clear.

Hi @0X0nosugar , I posted a picture example of what I'm trying to say but yes, certain parts of the images — yun, Aug 18 '15 at 16:59
Maybe you can achieve what you want easier by editing the image in photoshop and crop or trim each view you want to react as a button, then put many imageViews in your layout xml and set onClickListener for each one of them. — Hussein El Feky, Aug 18 '15 at 17:24
android has RelativeLayout on the one hand and the concept of density independent pixels (dp) on the other hand. So maybe it's possible to place transparent clickable Views on top of one ImageView containing your picture and set their width and height and margin(left & top) in dp. If you change the picture of course you may have to change the dp values for the clickable Views. But this way you avoid hardcoding coordinates for every device out there. — Bö macht Blau, Aug 18 '15 at 17:26
@HusseinElFeky, I was going to do that but there are multiple base images I have to use in the screen slide so I would have to make a ton of the edited images and then align it correctly. It's a good idea but not what I'm looking for. Thanks! — yun, Aug 18 '15 at 17:39

score 1 · Accepted Answer · answered Sep 02 '15 at 18:35

I know it's been like 2 or 3 weeks since this question was even seen but I have just figured out the answer to my question. If you know the size of your original image (mine is 1024x748), then you can find calculate approximate coordinates in relation with the ImageView and original image sizes.

For example, tablet screen is 2048x1440.

Some pseudocoding:

// Touch Coordinates
float eventX = event.getX();
float eventY = event.getY();

// Get ImageView's size
// ImageView v
float viewW = v.getWidth();
float viewH = v.getHeight();

// Ratio:
// originalW and originalH are the image's original size
float ratioW = viewW/originalW;
float ratioH = viewH/originalH;

// Get "true" coordinates
float x = eventX/ratioW;
float y = eventY/ratioH;

The above code will get you the base image's coordinates in relation to the ImageView's touch coordinates. Also, the ImageView scale type must be centered (or at least for my code, might be different for yours?).

I hope this helps someone else searching through stack overflow! This might not be the strongest way of doing things but it's an easy workaround for those who have things to click on through thousands of android devices!

Android ImageView Coordinate Clicking

1 Answers1