Dressing a mannequin with different items in android - android-layout

Question

I am trying to implement similar screen. Unable to add different items at proper place. I want to add shoes at the proper place.
Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:padding="0dp">
<ImageView
android:id="#+id/imgBody"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/dress" />
<ImageView
android:id="#+id/imgFeet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgBody"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:src="#drawable/ic_shoe1"
android:visibility="gone" />
<ImageView
android:id="#+id/imgFace"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginLeft="55dp"
android:layout_marginTop="0dp"
android:src="#drawable/ic_head"
android:visibility="gone" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"/>

Answer 1

Try to user Table layout for split a screen in two part. like below :
Here i have use android:layout_weight="0.5" for screen size.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEBEB"
android:stretchColumns="2"
android:weightSum="2">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF"
android:orientation="vertical">
<!--Write your xml Right side xml code here-->
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF">
<!--Write your xml Left side xml code here-->
</RelativeLayout>
</TableRow>
</TableLayout>

Answer 2

Use Constraint Layout it will be easy for you to Design your Requirement
Add this dependency in your Project
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Here I have added a code for your design
<?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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/splash" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="55dip"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
</android.support.design.widget.TabLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="265dp"
tools:layout_editor_absoluteY="463dp" />
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>

Answer 3

I think instead of layout you should try to use canvas in left preview screen. On selecting any item should update left canvas by adding item in canvas and rendering elements.
Please have a look over canvas and drawing images over canvas.