Layered layout problem

Question

Hi,

I am trying to create layout with the following layers (from bottom to top):

1. Tab
2. Background image covering all the tab page
3. Foreground image covering 75% of the tab page
4. Table layout covering 90% of foreground image. This will display information.

When the user scrolls the screen to the right layer 3 and 4 will be changed to display different image and information. If the user scrolls the left the original layer 3 and 4 will be displayed.

I understand how gesture and animation work so that is not a problem but how do I go about creating the layout?

Thanks.

Answer 1

I think your question is probably more complicated than I'm understanding it to be, but is something like this what you're after?

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

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

        <TabWidget android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <include layout="@layout/some_xml_file"/>

        </FrameLayout>
</LinearLayout>
</TabHost>

Then you have your some_xml_file defined as this:

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

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@drawable/techno"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true">

        <TableLayout android:layout_height="wrap_content"
            android:layout_width="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentBottom="true">

            <TableRow>
                <TextView android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello world."/>
                <TextView android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="I'm another cell"/>
                </TableRow>

            <TableRow>
                <TextView android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Just more stuff"/>
                <TextView android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="And one last one"/>
            </TableRow>
        </TableLayout>
    </RelativeLayout>
</RelativeLayout>

That gives you a nested layout with tabs at the top, holding a view with its own background (outer RelativeLayout with @drawable/start_menu_background), then that one has its own background (inner RelativeLayout with @drawable/techo), which in turn has a table in it with a couple rows.

The only thing I'm not happy about with that is that I had to hardcode the height of the inner relative layout, as it always seemed to want to fill the parent (regardless of the size of the background image I gave it). But you could play around with that and see what you get.

Of course, to get this to work you'll have to put in all the code for TabHosts to work. See these two examples (official guide and another one) if you haven't done that before.