RelativeLayout different position of items in editor and on device

Issue

I'm trying to make footer in RelativeLayout with 3 items- one ImageView, one TextView and a Button. I managed to position the ImageView at left side of layout and TextView near ImageView on the left side. However, I cannot properly set position of button at right side of the layout. Positions are different in editor and in my device (when I'm testing it). When I position everything in the way I wanted in editor, after running it on device it doesn't look the same. Button that should be on the right side of layout goes off screen.

For example this is what I see in editor, and this is what I see on device. If I move button in editor, on position where it should be, like this, then it goes off screen on device, like this.

I also tried using LinearLayout, gravity, layout_gravity, weight and different combinations of padding and margins but i just can't get it to work, I don't understand where problem is.

Here is my xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:padding="4dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background" />

    <ImageView
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:paddingBottom="3dp"
        android:paddingTop="3dp"
        android:src="@mipmap/help" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="60dp"
        android:paddingTop="10dp"
        android:text="help"
        android:textColor="@color/mainWhite" />

    <Button
        android:id="@+id/helpButton"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="330dp"
        android:layout_marginTop="3dp"
        android:background="@mipmap/Continue" />
</RelativeLayout>

Thank you.

Solution

Your full layout should look like this. You need to use layout_alignParentLeft and layout_alignParentRight properly.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="5dp"
    android:background="@drawable/background"
    android:padding="4dp">

    <ImageView
        android:id="@+id/question_icon"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="8dp"
        android:padding="3dp"
        android:src="@mipmap/help" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@+id/question_icon"
        android:text="Help"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/helpButton"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="8dp"
        android:background="@mipmap/Continue" />
</RelativeLayout>

Answered By - Reaz Murshed