Tabhost android with a fixed header

Question

I have the following layout:

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

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

            <Button 
                android:layout_height="wrap_content"
                android:layout_width="wrap_content" 
                android:id="@+id/saveRecipeButtonId" 
                android:text="@string/save_recipe_button" 
                android:layout_gravity="center" />

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="bottom" />
        </LinearLayout>

</TabHost>

I want the button to apear on the TOP for all tabs, a fixed header. The problem in this layout that the TAB icons (TabWidget) do not apear on the screen. I guess that is because of the fill_parent for the frame layout. But I do not want to define a fixed size (because it is not good for using on other devices...)

How can I fix: I need it to be like Button Tabs TabWidget

EDIT: I have found the problem, new XML is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:background="@drawable/show_recipe_bg"> 

    <Button 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/saveRecipeButtonId" 
        android:text="@string/save_recipe_button" 
        android:layout_gravity="center" />

    <TabHost 
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom" />
        </LinearLayout>
    </TabHost>
</LinearLayout>

Android: Tabs at the BOTTOM

score 0 · Answer 1 · answered Dec 15 '11 at 17:10

how about this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent">
    <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:layout_height="match_parent" android:orientation="vertical">
        <TabWidget android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget>
        <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@android:id/tabcontent">
            <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/tab1"></LinearLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/tab2"></LinearLayout>
            <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/tab3"></LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

Still not good - since the TABS are in the buttom of the screen - they disappear — Yoav, Dec 15 '11 at 17:32

score 0 · Answer 2 · answered Dec 15 '11 at 17:25

0

There is two possible ways:

It is mentioned in @sampathpremarathna answer - just move Button up in hierarchy, to the level of TabHost
You can try to change LinearLayout to RelativeLayout and define that FrameLayout should be below button, and above tabs.

answered Dec 15 '11 at 17:25

Jin35

8,602
3
32
52

The problem is that the TAB icons are in the buttom of the layout. When using match_parent the frame of the tab takes the screen and the TABs are out of the screen – Yoav Dec 15 '11 at 17:33
In second solution - in relative layout you can provide params `android.alignParentRight`, `android.alignParentLeft`, `android.above` and `android.below` there is no matter what you write in `width` or `height` params - it just ignored – Jin35 Dec 15 '11 at 17:38

Tabhost android with a fixed header

2 Answers2