XML Code appears different on Devices and for Images

Question

This XML Code really confuses me:

    <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="false"
        android:layout_alignParentTop="false"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:elevation="10dp" />

    <ImageView
        android:id="@+id/daimajia_slider_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="false"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_toEndOf="@+id/space3"
        android:layout_toStartOf="@+id/space2"
        android:elevation="20dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:text="Button" />



    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/daimajia_slider_image"
        android:layout_alignEnd="@+id/daimajia_slider_image"
        android:elevation="25dp"
        app:srcCompat="@mipmap/ic_launcher" />

</RelativeLayout>

This xml code should Display a picture in "daimajia_slider_image" (it's an image slider from agithub project , but I don't think this has an effect on my problem) and a white frame in "imageView4"

It works very fine in the "Game of thrones" pictures, on all devices, but completely not in that Girls' selfie, on my sony xperia xz and Samsung Galaxy S6. In the screenshots in which is no white frame visible,the frame is in the exact same scale right behind the image. Have a look at the different images:

EDIT

Here's the java code to that layout:

                Glide.with(v).load(getUrl()).into(ImageView4);
                Glide.with(v).load(getUrl()).into(daimajia_slider_image);

//here i do the white framing
                ImageView4.setColorFilter(Color.WHITE);

Answer 1

This seems to solve the problem. thanks @smora who brought me on the idea with the multiple Relavivelayouts. like this, 2 problems are solved at once, I could even put on a drop shadow on the RelativeLayouts, which was my problem in another question.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:paddingTop="0dp">

    <RelativeLayout
        android:id="@+id/outerRL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:background="@drawable/shadow1"
        android:elevation="10dp">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="false"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:adjustViewBounds="true"
            android:elevation="10dp" />

        <RelativeLayout
            android:id="@+id/innerRL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:background="@drawable/shadow1"
            android:elevation="15dp">

            <ImageView
                android:id="@+id/daimajia_slider_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="false"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:adjustViewBounds="true"
                android:elevation="15dp" />
        </RelativeLayout>
    </RelativeLayout>


    <ImageButton
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="25dp"
        android:backgroundTint="@color/colorPrimary"
        android:scaleType="centerInside"
        android:src="@drawable/ic_add_snap"
        android:text="Button"
        android:tint="@android:color/white" />


    <RelativeLayout
        android:id="@+id/heart_shadow"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignBottom="@+id/button3"
        android:layout_alignEnd="@+id/button3"
        android:alpha="0.9"
        android:background="@drawable/shadow1"
        android:elevation="29dp">

    </RelativeLayout>

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignBottom="@+id/outerRL"
        android:layout_alignEnd="@+id/outerRL"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"

        android:backgroundTint="@color/colorHeartRed"
        android:elevation="30dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_core_heart"
        android:tint="#ffffff" />

</RelativeLayout>

Answer 2

Using ConstrainLayout you can have this layout following this

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/content_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:elevation="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:elevation="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <ImageView
            android:id="@+id/daimajia_slider_image"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:elevation="20dp"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <ImageButton
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="25dp"
            app:layout_constraintBottom_toBottomOf="@+id/daimajia_slider_image"
            app:layout_constraintRight_toRightOf="@+id/daimajia_slider_image"
            app:srcCompat="@mipmap/ic_launcher"/>

    </android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>