code XML apparaît différent sur les appareils et pour les images

Question

Ce code XML me confond vraiment:

<?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> 

devrait afficher une image dans « daimajia_slider_image » (c'est un curseur sur l'image du projet github, mais je ne pense pas que cela a un effet sur mon problème) et un cadre blanc dans "imageView4"

Il fonctionne très bien dans les images "Game of Thrones", sur tous les appareils, mais complètement pas dans ce selfie des filles, sur mon Sony Xperia xz et Samsung Galaxy S6. Dans les captures d'écran dans lesquelles aucun cadre blanc n'est visible, le cadre est exactement dans la même échelle juste derrière l'image. Jetez un oeil sur les différentes images:

EDIT

Voici le code java pour que la mise en page:

   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

Cela semble résoudre le problème. merci @smora qui m'a amené sur l'idée avec les multiples Relavivelayouts. comme ça, 2 problèmes sont résolus à la fois, je pourrais même mettre une ombre portée sur les RelativeLayouts, ce qui était mon problème dans une autre 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

En utilisant ConstrainLayout vous pouvez avoir cette mise en page suivante ce

<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>