How to reduce the tab bar height and display in bottom

Question

can anybody tell how to reduce the height of tab bar and display tab bar in bottom

Thanks

Answer 1

Add the following method to your class that extends TabActivity

 public void addNewTab(Context context, String title, int height){
     TabHost tabHost = getTabHost();  // The activity TabHost
     Intent intent = new Intent().setClass(context, HelloTabsActivity.class);
     TabHost.TabSpec spec = tabHost.newTabSpec(title.toLowerCase()).setIndicator(title).setContent(intent);
     tabHost.addTab(spec);
     int totalTabs = tabHost.getTabWidget().getChildCount();
     ((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).removeViewAt(0);
     ((TextView)((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).getChildAt(0)).setHeight(30);
     tabHost.getTabWidget().getChildAt(totalTabs-1).getLayoutParams().height = height;
 }

then call it like this addNewTab(this, "tab title", 30);

Answer 2

<TabWidget android:id="@android:id/tabs" android:tabStripEnabled="false" android:padding="0dip" android:layout_width="wrap_content" android:layout_height="fill_parent"/>

Answer 3

Note that you have to change the height of each tab. For two tabs:

@Override
public void onCreate(Bundle savedInstanceState) {
    ... // other code
    final int height = 45;
    mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height = height;
    mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height = height;
}

Answer 4

Working with tabs in the Eclipse "graphical layout" mode is not quite intuitive.

NOTE - Currently I am not able to attach pictures to this answer as my reputation is below 10. Maybe in the future I will edit it and add them.

1) To change tab bar height:- Select "tabs (TabWidget)" in the Outline view. A selection/resize box should appear around the tab bar and its height can now be modified. I have made it thinner in picture1.

2) To move the tab bar to bottom:- Select "tabs (TabWidget)" in the Outline view and drop it into the LinearLayout above it (as marked in the picture 1). This will send the "tabs (TabWidget)" to the bottom of the list (see picture2). Tabs Bar might disappear at this stage. So adjust the weights of "tabcontent" & "tabs (TabWidget)" till it looks ok. I have used 10 & 1 respectively.

3) To bring tab2 to the top:- After design/layout of tab1 is complete, we want to work on the next tab. But Eclipse does not allow selecting it. To bring tab2 to the top select tab1 and drop it into tabcontent. This will send tab1 to the bottom of the list and tab2 to the top. Later when work on tab2 is complete, tab3 can be brought up.

This pretty roundabout way of working in graphical layout mode but maybe better than typing xml code.

Cheers

Answer 5

use the following line of code to change the height, this is the last line in my onCreate method

tabHost.getTabWidget().getChildAt(0).getLayoutParams().height =35;

Answer 6

You could either

• Build your own tab using a TableLayout at the bottom of the screen - which gives you quite a lot of flexibility

or

• Modify use the existing TabHost/TabWidget - works in principle but I don't know how to reduce the tab bar height. Works like that:

Layout file main.xml:

<?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="@+id/tab_host"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TabWidget android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:id="@android:id/tabs"
            android:layout_gravity="bottom" />
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="fill_parent" android:layout_height="fill_parent" >
            <LinearLayout android:id="@+id/first_tab"
                android:orientation="vertical" android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <TextView android:layout_width="fill_parent"
                    android:layout_height="fill_parent" android:text="First Tab" />
                <!-- Replace TextView with your layout content for this tab -->
            </LinearLayout>
            <LinearLayout android:id="@+id/second_tab"
                android:orientation="vertical" android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <TextView android:layout_width="fill_parent"
                    android:layout_height="fill_parent" android:text="Second Tab" />
                <!-- Replace TextView with your layout content for this tab -->
            </LinearLayout>
            <LinearLayout android:id="@+id/third_tab"
                android:orientation="vertical" android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <TextView android:layout_width="fill_parent"
                    android:layout_height="fill_parent" android:text="One More Tab" />
                <!-- Replace TextView with your layout content for this tab -->
            </LinearLayout>
            <LinearLayout android:id="@+id/edit_item_text_tab"
                android:orientation="vertical" android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </FrameLayout>
    </TabHost>
</LinearLayout>

Source code of your activity, in this case StartActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class StartActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tab_host = (TabHost) findViewById(R.id.tab_host);
        tab_host.setup();

        TabSpec tabspec1 = tab_host.newTabSpec("TAB_1");
        tabspec1.setIndicator("Tab 1");
        tabspec1.setContent(R.id.first_tab);
        tab_host.addTab(tabspec1);

        TabSpec tabspec2 = tab_host.newTabSpec("TAB_2");
        tabspec2.setIndicator("Tab 2");
        tabspec2.setContent(R.id.second_tab);
        tab_host.addTab(tabspec2);

        TabSpec tabspec3 = tab_host.newTabSpec("TAB_3");
        tabspec3.setIndicator("Tab 3");
        tabspec3.setContent(R.id.third_tab);
        tab_host.addTab(tabspec3);

        tab_host.setCurrentTab(0);
    }
}

Turns out to look like: