About android layout with two imageView

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.