Android: Speech balloon - ImageView overlapping parent

Question

I'm trying to get an ImageView to overlap it's parent and create a speech balloon like, compound view. E.g:

I am not able to have the triangle at the bottom be part of the blue block and overlap any other views/controls that are placed below it.

Does anyone have a way of doing this?

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >

<LinearLayout
    android:id="@+id/appointment_ticket_signed_in_content_wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/background_green" >

    <ImageView
        android:id="@+id/appointment_ticket_signed_in_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_action_accept"
        android:contentDescription="@string/hello_world"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/activity_vertical_margin" />

    <TextView
        android:id="@+id/appointment_ticket_signed_in_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_large"
        android:layout_marginRight="@dimen/padding_large"
        android:layout_marginBottom="@dimen/padding_large"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</LinearLayout>

<ImageView
    android:id="@+id/appointment_ticket_signed_in_down_arrow"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:scaleType="centerInside"
    android:src="@drawable/triangle"
    android:contentDescription="@string/hello_world"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:paddingBottom="-25dp"
    android:background="@color/important_text_orange" />
</merge>

I thought the above XML was the way to go but it seems a negative margin or padding bottom is unable to push the view outside its parent. This XML is placed inside a relativelayout.

Does anyone know the answer to this?

EDIT

My situation:

Is there any way to overlap the next elements padding without having direct access to it?

Answer 1

here is an xml file that creates something that could work. Try it out and let me know:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10sp" >

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200sp"
    android:layout_below="@+id/complete_bubble"
    android:background="#123456" />

<RelativeLayout
    android:id="@+id/complete_bubble"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-15sp" >

    <RelativeLayout
        android:id="@+id/main_block"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10sp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Some text"
            android:textColor="#FFFFFF" />
    </RelativeLayout>

    <ImageView
        android:layout_width="20sp"
        android:layout_height="20sp"
        android:layout_below="@+id/main_block"
        android:layout_marginLeft="20sp"
        android:background="#000000" />
</RelativeLayout>

</RelativeLayout>

This negative margin works.