0

I would like to position an image of a mouse over a wallpaper containing different mouse holes. My the scale type for my wallpaper mouseHole is set to CENTER_CROP

I am setting the X and Y positions of my mouse using the following code:

int mouseX = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, xLoc, getResources().getDisplayMetrics());
int mouseY = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, yLoc, getResources().getDisplayMetrics());

However, on two different tablets (specifically a Samsung Galaxy Tab 5 vs. an Asus ZenPad 10), the locations do not perfectly match. The wallpaper is an image with four different mouse holes, and I would like the location of the mouse to match on all tablets.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Pink Jazz
  • 784
  • 4
  • 13
  • 34
  • I think you have to take the cropped part of the image into account. If you cut off 20 px on the left, you need to move the mouse those 20 px also – David Medenjak Jan 04 '16 at 15:52
  • So, would using `FIT_XY` work instead? – Pink Jazz Jan 04 '16 at 16:04
  • you will probably have to load and display the image yourself if you need the coordinates of points in it, fit_xy has the same problem, `fitStart` would work but just crop off one side – David Medenjak Jan 04 '16 at 16:29
  • Also, the X coordinates are fine, my problem is with the Y coordinates. I wonder if it has to do with the soft keys on the Asus tablet. – Pink Jazz Jan 04 '16 at 17:58
  • I'd suggest going through this free [Udacity](https://www.udacity.com/course/material-design-for-android-developers--ud862) training course on developing user interfaces. In the first 10 minutes you get a lesson on how to calculate and use the proper units when developing GUI's – ImDeveloping Jan 06 '16 at 15:47

2 Answers2

0

Take a look at developer guide for supporting multiple screen sizes here

TLDR: you can set in your android manifest to allow only users with the screen sizes specified in this section to be able to see and download your application. OR create different layouts for different screen sizes, it is more work but it is what you need :)

ImDeveloping
  • 101
  • 9
  • Both tablets are 10 inch tablets, so I don't think the screen size is the issue. – Pink Jazz Jan 04 '16 at 17:43
  • if you look [here](http://www.gsmarena.com/samsung_galaxy_tab_s_10_5-6438.php) for the specs on the display for the Samsung Galaxy Tab 5, or [here](http://www.gsmarena.com/asus_zenpad_10_z300c-7532.php) for the Asus ZenPad 10 you can see that the DPI is very different. – ImDeveloping Jan 04 '16 at 17:58
0

You can not use fixed locations with an ImageView and scaleTypes.

As soon as the image is scaled, you have to apply the same transformation to your mouse coordinates.

An example with scale types

This is basically what you have been doing and why there is an error, a bit exaggerated though.

Given an image 100x100px

  • Mouse A at [100px, 100px] of the image
  • Mouse B at [5,5]

(I'm not taking densities into account yet)

Given an imageView with `height 100px, width 50px.

Using centerCrop, this will scale the image: half the width, and offset the height, resulting in the following

  • mouse A would still be at [100, 100], which would be outside of the view (width is 50), while
  • mouse B would be drawn at [5,5] from the top, which would resolve to [10, 30] on the image before scaling and cropping

You'd have to apply the same scaling to your points as you did to your image: [x/2, y - 25] in this sample.

Scale yourself!

You will need to scale the bitmap yourself. Do some computation, get the offset and apply it to your bitmap and positions.

Densities

Densities are not really a problem here, since you can just calculate the positions for all densities and set those values in the value-mdpi etc folders.

Community
  • 1
  • 1
David Medenjak
  • 33,993
  • 14
  • 106
  • 134