Question

I've been messing around with this for a few days now, hopefully someone here can lend me a hand.

I have a simple two-column layout, the left side is a navigation bar with buttons, the right side is a content panel. When the user taps one of the buttons (say, the third one down), I'd like to have a floating view aligned to the right of this button but floating on top of the content pane. Here's a picture to illustrate what I mean: Layout

Everything I've tried shoves the floating menu inside the navigation bar or inside the content panel, which is not what I want. Any ideas? Here's basically what I have so far:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:id="@+id/navigation_bar"
    >
        <FrameLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
        >
            <ImageButton 
                android:id="@+id/button1_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon"
                android:layout_gravity="center"
            />
        </FrameLayout>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
        >
            <ImageButton 
                android:id="@+id/button2_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon"
                android:layout_gravity="center"
            />
        </FrameLayout>
    </LinearLayout>
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.14"
        android:layout_toRightOf="@id/navigation_bar"
    >
    </FrameLayout>
</RelativeLayout>
Was it helpful?

Solution

A FrameLayout allows you to have a view overlapping another view. I'm not sure it makes sense to have them with only one child view, as you have in your example. Try having a FrameLayout at the highest level, with your "static" view as the first child element, and the floating menu as the second child.

The developer documents have a good overview the layout types, it might help you get started.

OTHER TIPS

RelativeLayout is what you want.
FrameLayout must only have one child, and is therefore, usually, only used for a placeholder where other layouts come later (such as the main frame of the activity).
AbsoluteLayout is deprecated, and should not be used.

RelativeLayout allows the views to overlap, and allows doing, pretty much, anything you want.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top