Android: Overlapping two views (intentionally!)

Question

just wondering is it possible to overlap two elements?

This is an illustration of what im trying to achieve:

Answer 1

You can use a RelativeLayout for the blue box, align your ImageView to the top-right corner, and then use negative margins to push it over the bounding box. Here's a sample illustrating the general idea:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">



    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"        
        android:layout_marginTop="-10dp"
        android:layout_marginRight="-10dp"
        android:src="@drawable/icon"/>
</RelativeLayout>

EDIT: I played with this a bit more, and you have to set android:clipChildren="false" on the parent of the RelativeLayout. Here's a more complete sample:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".LoginActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">
    <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#ff0000"
            android:layout_margin="100dp">
        <ImageView
                android:src="@drawable/ic_launcher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="-25dp"
                android:layout_marginTop="-25dp"/>
    </RelativeLayout>
</LinearLayout>

Answer 2

A very simple solution is taking margin of ImageView in negative values(e.g. -40dp). But it works only in some situations.

Answer 3

Another simple approach would be to use two transparent image views. These imageviews will be to the top and right of the blue layout. Set background of this image views as #00000000 to make them transparent.