Layout used on different resolution devices

Question

I wrote this login layout that fit perfectly on my device. My problem is that on another device will not be displayed correct because specified values are used for top, left margins.

What I need to do to be sure that constrains will be keeped on any device?

P.S. I have images for mdpi, hdpi etc.

The code is:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/AppTheme.NoActionBar"
tools:context="com.abc.abc.Login"
android:layout_gravity="center_horizontal">

    <RelativeLayout android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="710dp"
        android:gravity="center_horizontal">


        <RelativeLayout android:id="@+id/login_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <ImageView android:id="@+id/login_button"
                android:src="@drawable/login"
                android:layout_marginTop="588dp"
                android:layout_width="360dp"
                android:layout_height="53dp" />

            <ImageView android:id="@+id/email_and_password"
                android:src="@drawable/email_and_password"
                android:layout_marginTop="465dp"
                android:layout_width="362dp"
                android:layout_height="107dp" />

            <ImageView android:id="@+id/separator"
                android:src="@drawable/separator"
                android:layout_marginStart="169dp"
                android:layout_marginTop="412dp"
                android:layout_width="25dp"
                android:layout_height="12dp" />

            <ImageView android:id="@+id/facebook_button"
                android:src="@drawable/facebook"
                android:layout_marginTop="383dp"
                android:layout_width="166dp"
                android:layout_height="66dp" />

            <ImageView android:id="@+id/google_button"
                android:src="@drawable/google"
                android:layout_marginStart="196dp"
                android:layout_marginTop="383dp"
                android:layout_width="166dp"
                android:layout_height="66dp" />

            <ImageView android:id="@+id/dont_have_an_account"
                android:src="@drawable/dont_have_an_account"
                android:layout_marginStart="54dp"
                android:layout_marginTop="665dp"
                android:layout_width="255dp"
                android:layout_height="19dp" />

            <ImageView android:id="@+id/logo"
                android:src="@drawable/logo1"
                android:layout_marginTop="80dp"
                android:layout_width="220dp"
                android:layout_height="219dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true" />

        </RelativeLayout>

    </RelativeLayout>

Answer 1

Try not to use marginTop on all the views. Instead set the top most view with a marginTop and then all the images below them can be placed by android:layout_below="<imagView id>" and with some marginTop relative to the view above and not the parent. You can check this answer