Search code examples
androidandroid-layoutimageviewdpi

Placing a view to exact same place for all android devices


My task is to allow user to upload an image and let user to put a custom view anywhere he clicks. (Like taging a pic on facebook) That is simple by getting the touch location and dynamically adding view to a relative layout and setting leftMargin and topMargin.

But I want this custom component to get drawn in the 'exact' same position in every android device.

For example; Think that you uploaded a picture into your profile and tag someone, other people who look at your pic with different devices should see the tag in the exact same place relative to the pic.

I know that I have to take account of screen density as well but don't know how to manipulate x, y according to that.

Look at the example screenshot: (Blue box is put by user click)

This screenshot is from a test device with screen density 1, another device with density 1.5 shows the blue box in a different position.

(Images Updated:)

Device with density 1

Device with density 1,5

This is a test code:

            icon = new ImageView(getActivity());
            icon.setBackgroundColor(getResources().getColor(R.color.blue));
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(30, 40);
            int density = this.getResources().getDisplayMetrics().density;
            params.leftMargin = (int)(posX/density);
            params.topMargin = (int)(posY/density);

Solution

  • Think that you uploaded a picture into your profile and tag someone, other people who look at your pic with different devices should see the tag in the exactly same place.

    Then you do not want to be placing "a view to absolute X, Y for all android devices".

    For example, suppose we have two devices, A and B. On Device A, your image is a small phone, and the image happens to be rendered at a size of 480 pixels high by 270 pixels wide. The user taps at a position that happens to be 80 pixels down from the top and 70 pixels in from the left.

    Device B has a screen approximately the size of the country of Turkey. More specifically, your image is rendered at 1600km by 900km on an -mdpi screen density, in a portrait orientation, meaning the image is around 10,078,736,000 pixels high by 5,669,289,000 pixels wide.

    You do not want to be putting your marker 80 pixels down from the top and 70 pixels in from the left. That will put the marker almost in the upper-left corner.

    Assuming that you arrange to show your image at the same aspect ratio, you will want to save the percentages that the marker is from some corner. In this example, 80 pixels from the top is 80/480 or ~16.7% from the top, and 70 pixels in from the left is 70/270 or ~25.9% from the left. You would then apply the percentages to the size of the image on another device, and so show your marker ~16.7% from the top and ~25.9% from the left on the Turkey-sized screen. Or on a tablet. Or on a larger phone. Or on a TV. Or on whatever you are choosing to use.