Constrain object in RelativeLayout (under ConstraintLayout) above another object

Question

I have 4 ImageViews (arrow key pictures) in a RelativeLayout. I want to position the up arrow key above the left one (not exactly above), attached a sample layout here (The left one is what I want).

However, I don't want to use the tag android:layout_marginTop="165dp" as different devices have different screen sizes. I just want to use android:layout_above="@+id/left", to perfectly position it above the left arrow. But when I do so, without using android:layout_marginTop, the outcome looks like this (what I do NOT want).

How do I make my arrow key arrangement look aligned correctly, on all devices?

Here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ControllerActivity">


    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >

        <ImageView
            android:id="@+id/up"
            android:layout_width="84dp"
            android:layout_height="96dp"
            android:layout_above="@+id/left"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="165dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            app:srcCompat="@drawable/up" />

        <ImageView
            android:id="@+id/left"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/up"
            android:layout_toStartOf="@+id/up"
            app:srcCompat="@drawable/left" />

        <ImageView
            android:id="@+id/down"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_below="@+id/left"
            android:layout_centerHorizontal="true"
            app:srcCompat="@drawable/down" />

        <ImageView
            android:id="@+id/right"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/up"
            android:layout_toRightOf="@+id/up"
            app:srcCompat="@drawable/right" />


    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

Thanks in advance.

Answer 1

First, i would like to point out that, that Relative layout where it is right now is redundant. So you can make it your parent layout instead of Constraint layout.

To accomplish what you want, remove alignParentTop on you up arrow. So, your code will look like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ControllerActivity">

        <ImageView
            android:id="@+id/up"
            android:layout_width="84dp"
            android:layout_height="96dp"
            android:layout_above="@+id/left"
            android:layout_centerHorizontal="true"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            app:srcCompat="@drawable/up" />

        <ImageView
            android:id="@+id/left"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/up"
            android:layout_toStartOf="@+id/up"
            app:srcCompat="@drawable/left" />

        <ImageView
            android:id="@+id/down"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_below="@+id/left"
            android:layout_centerHorizontal="true"
            app:srcCompat="@drawable/down" />

        <ImageView
            android:id="@+id/right"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/up"
            android:layout_toRightOf="@+id/up"
            app:srcCompat="@drawable/right" />

</RelativeLayout>