Android TABS with fragments

Question

I've been working on a small project that consists of a GUI with a number of tabs. I'm quite new with the concept of fragments however it seems that they're a best practice within the android tab landscape. I managed to code a simple tab app, that switches between 3 tabs.

The only issue I have is when I try placing the tabs at the bottom of the screen. When they're at the bottom, the tab widget covers the container(framelayout in this case) and so nothing happens, the screen remains the same when clicking the various tabs.

The following XML layout represents the good version( where the tabs are at the top of the screen):

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

            <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0"/>

            <FrameLayout
                android:id="@+android:id/realtabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
    </TabHost>
</LinearLayout>

The following XML layout represents the version that isn't working, when the tabs are at the bottom of the screen:

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

            <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                />

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

            <FrameLayout
                android:id="@+android:id/realtabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
            />
        </RelativeLayout>
    </TabHost>
</LinearLayout>

I changed the layour to relativelayout and added this command: android:layout_alignParentBottom="true" to the tabwidget. Does anyone have an alternative idea of how I can sort this issue? Thanks in advance.

Answer 1

You can use weight instead. Try this layout marking

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

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

</android.support.v4.app.FragmentTabHost>

You can replace FragmentTabHost with own TabHost class. So, your tabs will be at the bottom of the screen. Be careful with nested weights (they are bad for performance) and deeping in view hierarchy (especially for android < 4).

Answer 2

In general using tabs at the bottom of the screen is a bad solution (see Android design guidelines).

For your solution: put TabWidget at the end of list of view. Because of drawing is a line process and fragments this your case are drowed upper TabWidget