Overlapping ViewFlipper with other components

Question

I have a ViewFlipper, a button and a custom view in one layout. I would like button and custom view to be on top of the viewflipper so that they appear in every layout that is included in the viewflipper. However I can't see anything except viewflipper right now. How can I achieve the effect i want?

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="fill_parent"
    android:id="@+id/water_room_layout" android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

       <com.example.room.CustomView
        android:id="@+id/customView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
       <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_gravity="center_horizontal|bottom"
       />
    <ViewFlipper android:id="@+id/water_room_flipper"
        android:layout_width="fill_parent" android:layout_height="fill_parent">

        <include layout="@layout/water_room_wall1" android:id="@+id/first" />
        <include layout="@layout/water_room_wall2" android:id="@+id/second" />
        <include layout="@layout/water_room_wall3" android:id="@+id/third" />
        <include layout="@layout/water_room_wall4" android:id="@+id/fourth" />
    </ViewFlipper>

</FrameLayout>

score 0 · Accepted Answer · answered Oct 20 '13 at 06:30

Use a RelativeLayout and reorder the views in your layout as follows:

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

    <ViewFlipper android:id="@+id/water_room_flipper"
                 android:layout_width="fill_parent" android:layout_height="fill_parent">

        <include layout="@layout/water_room_wall1" android:id="@+id/first" />
        <include layout="@layout/water_room_wall2" android:id="@+id/second" />
        <include layout="@layout/water_room_wall3" android:id="@+id/third" />
        <include layout="@layout/water_room_wall4" android:id="@+id/fourth" />
    </ViewFlipper>

    <com.example.room.CustomView
            android:id="@+id/customView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_gravity="center_horizontal|bottom"
            />   
</RelativeLayout>

hey, i figured it out myself. I've reordered and it magically was sorted out. Was going to announce it here. I'll accept your answer. Can you please elaborate why does the order matter? Btw, I didn't use relative layout, it still works. Thanks — Nazerke, Oct 20 '13 at 06:35
The ordering tells the system which view is on top. So one defined later is on top of the other defined earlier. I prefer to use relative layouts as it gives more flexibility in terms of positioning views relative to one another eg. button below custom view and so on.. — Amulya Khare, Oct 20 '13 at 06:40

Overlapping ViewFlipper with other components

1 Answers1