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.

Answer 2

Method 1: Using the image of the balloon as the background image of a RelativeLayout and then add a TextView to that layout.

Method 2 (Also the more awesome method): Creating a custom view that will not only draw the speech balloon but also have a setText(String) method that will adjust the text that is drawn in the bubble and resize it to fit the text always. Then you open source that and share with the world.

If you want to create a custom view...

public class AwesomeTextBalloon extends View {
    // constructors here

    @Override
    protected void onDraw(Canvas canvas) {
        // first draw the balloon
        // then draw the text
    }

    public void setText(String newText) {
        // set text variable here
    }
}

Then add the View programmatically or in the xml and call setText() to change the value of the balloon text.

Answer 3

Try Using this

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

    <FrameLayout
        android:id="@+id/header2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pop_up" />

    <HorizontalScrollView
        android:id="@+id/scroll"
        android:layout_width="320dip"
        android:layout_height="80dip"
        android:layout_below="@id/header2"
        android:background="@android:color/darker_gray"
        android:fadingEdgeLength="0dip"
        android:paddingLeft="1dip"
        android:scrollbars="none" >

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

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

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

    <FrameLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/scroll"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/footer"
        android:layout_marginTop="-1dip"
        android:src="@drawable/pop_dwn" />

</RelativeLayout>