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:

Basically its a circle ImageButton, which center lies on the corner of a rectangle. How should I go about positioning it? Can I use RelativeLayout or something else?

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>