how to half overlap imageview on another imageview in android

Question

how can I overlap images half on one another from layout XML file like this image.

Answer 1

Simply you can use RealtiveLayout and negative margins

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_landing"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/screen_background">


    <ImageView
        android:background="@color/black"
        android:id="@+id/img_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@+id/img_background"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-40dp"<!-- negative margin to half of height -->
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

Answer 2

The FrameLayout is more optimised to perform this function. I carries less overhead.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_landing"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >


    <ImageView
        android:id="@+id/img_background"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:src="@mipmap/ic_launcher"
        android:background="@color/colorPrimary"/>

    <ImageView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_below="@+id/img_background"
        android:layout_gravity="bottom|center_horizontal"
        android:src="@mipmap/ic_launcher"
        android:background="@color/cardview_dark_background"/>

</FrameLayout>