CODEWITHSUNDEEP
androidandroid-layout
chesnutcase
chesnutcase

Reputation: 522

Android: Overlapping two views (intentionally!)

just wondering is it possible to overlap two elements?

This is an illustration of what im trying to achieve:

enter image description here

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?

Upvotes: 13

Views: 29482

Answers (3)

2ank3th
2ank3th

Reputation: 3109

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.

Upvotes: 0

Arunendra
Arunendra

Reputation: 2174

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

Upvotes: 3

danh32
danh32

Reputation: 6244

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>

Upvotes: 26

Related Questions