Float views so they do not take up space in the layout

Question

Is it possible to float elements above other elements in Android so that they do NOT affect the layout of their container?

The effect I want to achieve is a floating speech-bubble-like element:

The yellow box above is the element I want to float above the other elements, but as you can see it pushes its container down creating the black space below the green bar, instead of floating above the gray area below it.

RelativeLayout can position the element appropriately but I cannot find a way to make the positioned element not expand the boundary of its container. Is this even possible on Android?

ANALOGIES

• in the web world the equivalent is an element which has 'position: absolute' and is thus not counted as part of the "flow" (ie: layout)
• in the WPF world the equivalent would be an element which is positioned inside a Canvas. The Canvas has its own bounds which take up space in the layout but its children can lie outside of its bounds and not affect the layout
• in the iOS world every view is positioned as a canvas (since there are no layout managers) so this behavior is achieved bysimply offsetting the element frame's x and y properties

Solution 1

RelativeLayout can position the element appropriately but I cannot find a way to make the positioned element not expand the boundary of its container.

Then you have the wrong container.

For example:

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

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/big"
        android:textSize="120dip"
        android:textStyle="bold"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/small"/>

</RelativeLayout>

Here, the small button floats over top of the large button. The small button does not "expand the boundary of its container", simply because the container is the entire content view.

You set up the RelativeLayout (or FrameLayout) container to be the one that contains the possible area your child can float over. Whether that is the entire screen or merely a subset is up to you. Conversely, if your child is affecting the boundary of its container, you are using the wrong container, or need to set up a container specifically for this role.

In another example, Roman Nurik shows how to implement a floating "undo bar", akin to Gmail's:

Solution 2

Take a look at the Relative layouts in android: for example when you dont specify a position at all of the views within the relative layout they will float on top of each other.

http://developer.android.com/guide/topics/ui/layout/relative.html

Example:

<?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" >

    <TextView
        android:id="@+id/update"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#444444"
        android:text="Update"
        android:textAppearance="?android:attr/textAppearanceLarge" />


    <TextView
        android:id="@+id/lost_of_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/some_button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="text view with lots of text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/some_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Some Button" />

</RelativeLayout>

Edit: CommonsWare was faster ;) take a look at his beautiful answer!

Comments

[JRaymond]

what do you mean by "RelativeLayout can position the element appropriately but I cannot find a way to make the positioned element not expand the boundary of its container"? the container is the relativeLayout?

[Marchy]

Awesome answer! It sounds like the answer is no, Android doesn't support not counting elements as part of layout). So the workarounds are either 1) place the RelativeLayout container higher up the UI tree so that its bounds contain all the space you need it to (ie: all the screen's elements) or 2) wrap all the elements in a FrameLayout and use 'layout_gravity' and margins to position the element (as per the Undo example you linked to above). Thanks for the thoughts!

[Marchy]

+1 for mentioning that elements in RelativeLayout will lay out on top of each other if no relative alignment is specified

[CommonsWare]

@Marchy: "Android doesn't support not counting elements as part of layout" -- that's correct.