About android layout with two imageView - android-layout

Question

I have movies Application
and I am working in the details of the movie layout
now I have two posters for each movie (orginal poster and backdrop poster)
I am working to make some thing like this:
I am trying to do that but I have problem which is: the backdrop poster came to the front of orginal poster and hide it (backdrop poster hide the orginal poster)
how I can send the original poster to the front of backdrop poster
this is my code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="67dp"
android:src="#drawable/ic_launcher_background" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/relativeLayout2"
>
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher_background" />
<!--android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"-->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_movie_poster1"
android:layout_centerHorizontal="true"
android:background="#ffff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="8dp"
android:id="#+id/relativeLayout2">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
<TextView
android:id="#+id/tv_movie_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#57486c"
android:padding="16dp"
android:textSize="36sp"
tools:text="The Hunger Games" />
<TextView
android:id="#+id/tv_movie_lang"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="italic"
tools:text="English" />
<TextView
android:id="#+id/tv_movie_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="7.4/10" />
<TextView
android:id="#+id/tv_movie_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
tools:text="2015"
/>
<TextView
android:id="#+id/tv_movie_overview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:text="Katniss Everdeen and Peeta Mellark become targets of the Capitol after their victory in the 74th Hunger Games sparks a rebellion in the Districts of Panem. " />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
and thankyou

Answer 1

Made the layout i think it will fulfill your requirement. Using Frame Layout overlay the poster image on the back image and accordingly manage.
Follow this XML part for upper layer. Make changes accordingly relate to images you used.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="280dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<ImageView
android:id="#+id/iv_movie_poster1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/testimage" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/iv_movie_poster_back"
android:layout_width="150dp"
android:layout_height="150dp"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/com_facebook_button_icon_blue" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
Here you can view the upper layer output.