How do I make ImageViews appear at same place on different displays?

Question

The blue rectangles are invisible areas(made visible for debugging) i click and something happens. on the IDE, they are at right places.

But on the genymotion(same model) they are placed at a bit different positions - why? What could be the problem - screen denisty?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="@+id/main">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/background"
    android:src="@drawable/page_2_bkg"
    android:layout_alignParentTop="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/door_closed2"
    android:src="@drawable/page2_door_closed" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/door_open2"
    android:src="@drawable/page2_door_opened"
    android:visibility="invisible" />

<ImageView
    android:layout_width="80dp"
    android:layout_height="300dp"
    android:id="@+id/boy"
    android:layout_marginLeft="160dp"
    android:visibility="visible"
    android:src="#ff2b16ff"
    android:layout_marginBottom="50dp" />

<ImageView
    android:layout_width="150dp"
    android:layout_height="300dp"
    android:id="@+id/doorBox"
    android:visibility="visible"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/background"
    android:layout_alignEnd="@+id/background"
    android:layout_marginRight="118dp"
    android:layout_marginEnd="118dp"
    android:src="#ffff3240" />

Answer 1

I see that you are using an XML layout, which wasn't in your original question until it was edited. At any rate, the issue is that the rectangle is being placed in relation to the screen, when it should be placed in relation to the image.

You can achieve this effect by doing the following:

• Add a new RelativeLayout inside your screen layout (which also happens to be a RelativeLayout)
• Resize and re-position the RelativeLayout to center and consume the full screen size etc.
• Make that new RelativeLayout background image your picture
• Place your rectangle inside that RelativeLayout and the position will always be maintained relatively. That's what the relative in RelativeLayout means ;)
• As a side-note, the 'dp' units should take density into account.

What you are trying to do is let the rectangle be in preportion to the image, but as you are resizing/moving the image, the rectangle has no way of knowing the dimensional preportions of the 'parent' image (even though its not really a parent, which is part of the problem). By making both objects move in relation to the parent, you always maintain correct positions.

Answer 2

Screen density is just one possibility and is likely one of the contributing causes. Another may be that you are placing the blue rectangle in relation to the screen, but what you should be doing is placing it in relation to the image.

This gets slightly more difficult with screen densities, because 100px on a 2x density screen will only move the rectangle half as far as it needs to be, so rather than working with pixels, consider working with percentages. It makes it much easier to deal with mentally.

For example, it looks like the 'door' rectangle goes from 75% of the width of the image, to 90% of the width of the image. It's about 15% of the height of the image from the top, to about 75% of the height of the image.

Knowing all that (psuedocode example):

• DoorRectangle.left = Image.left + (Image.width * 0.75)
• DoorRectangle.right = Image.left + (Image.width * 0.90)
• DoorRectangle.top = Image.top + (Image.height * 0.15)
• DoorRectangle.bottom = Image.top + (Image.height * 0.75)