Develop Reference

Are label and icon mutually exclusive in a TabHost TabSpec setIndicator?

On an Android app (min sdk 11, target sdk 18), a class which extends Fragment ought to create the TabHost tabs (TabSpec) with one label AND one icon. But...
TabSpec ts1;
// if the label is set to "Home", the label is displayed but not the image
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator("Home", getActivity().getResources().getDrawable(R.drawable.ic_tabone)).setContent(R.id.edit_species_tab);
// if the label is null or empty, the image is displayed
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator(null, getActivity().getResources().getDrawable(R.drawable.ic_tabone)).setContent(R.id.edit_species_tab);
As far as I can see the documentation does not mention that the label and the icon are mutually exclusive.
At first I thought that the label had a solid background colour hiding the icon, but this is not the case. In fact, when I set the TabHost background I can see that the label is transparent:
tab_host.getTabWidget().setBackgroundResource(R.drawable.ic_mybackground);
How can I set the TabSpec background so that both the label AND the icon are displayed for each tab?
tab_host.xml
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="65dp" >
<LinearLayout
android:id="#+id/edit_species_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_regions_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_quiz_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_about_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
</FrameLayout>

In holo theme, the tab only support label or icon and mutually exclusive.
After Holo, as a default the tab supposed only have label, please check the design guideline.
http://developer.android.com/design/building-blocks/tabs.html
If you willing to both label & icon at the same time, there are two options.
Option 1: Using old Gingerbread theme. Set your android:targetSdkVersion 9 or below. (Before Honeycomb)
Option 2: Using custom layout & view for your tab. Of course, it required some efforts, but you can use any custom layout what you want. For example:
in your activity code:
TabHost.TabSpec ts1;
View tabView = getLayoutInflater().inflate(R.layout.custom_tab, tab_host, false);
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator(tabView).setContent(R.id.edit_species_tab);
in your layout: (whatever you want)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>

How to change theme of TabHost from Holo.Light to Dark theme

I have been trying to change the theme for TabHost. So far I have got till here:
I have achieved this by using the following xml:
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/signupLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0"
android:gravity="center"
android:orientation="horizontal" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0" >
<ScrollView
android:id="#+id/scrollView02"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ScrollView>
<ScrollView
android:id="#+id/scrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ScrollView>
</FrameLayout>
</LinearLayout>
My MainActivity.java:
ContextThemeWrapper wrapper = new ContextThemeWrapper(
ActivityMain.this,
android.R.style.Theme_Holo_Light);
final LayoutInflater inflater = (LayoutInflater) wrapper
.getSystemService(LAYOUT_INFLATER_SERVICE);
dialog = new Dialog(wrapper);
dialog
.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog
.setContentView(R.layout.dialog_layout);
TabHost tabs = (TabHost) dialog
.findViewById(android.R.id.tabhost);
tabs.setup();
tabs.setCurrentTab(0);
TabSpec tspec1 = tabs.newTabSpec("Tab1");
tspec1.setIndicator("SIGN UP");
tspec1.setContent(R.id.scrollView02);
tabs.addTab(tspec1);
TabSpec tspec2 = tabs.newTabSpec("Tab2");
tspec2.setIndicator("LOG IN");
tspec2.setContent(R.id.scrollView01);
tabs.addTab(tspec2);
As I'm using Dialog class for the view and integrating TabHost inside the dialog, that's why I'm using ContextThemeWrapper for this to have some theme on the Dialog.
Now, my question is that how can I change the Holo.Light theme to Dark theme. Here is the picture what I want:
I know that android does not have Holo.Dark theme as of now. That is only available for ActionBars. So how can I achieve this solution.
Any kind of help will be appreciated.

This will work:
//Changing the tabs background color and text color on the tabs
for(int i=0;i<tabs.getTabWidget().getChildCount();i++)
{
tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.BLACK);
TextView tv = (TextView) tabs.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
tv.setTextColor(Color.parseColor("#ffffff"));
}
And for the indicator, have a layout like this beneath tabwidget
<LinearLayout
android:id="#+id/tab_indicator"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#bdbdbd" >
<LinearLayout
android:id="#+id/tab_indicator_left"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:layout_weight="1"
android:background="#f44b3b" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab_indicator_right"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:layout_weight="1"
android:background="#bdbdbd" >
</LinearLayout>
</LinearLayout>
And change the background color of indicator like this based on the tab selection.
tabindicator1.setBackgroundColor(Color
.parseColor("#f44b3b"));

See the link it will helpful
How to change default color to Tab Host
and also refer this it will helpful
http://joshclemm.com/blog/?p=136

I would suggest using as much of android's source as possible. It really makes things cleaner in my opinion. I added a basic example of what I used below. Not perfect but closer than anything else I was able to fine and cleaner than most examples.
https://github.com/android/platform_frameworks_base/tree/master/core/res/res
For instance, for the holo theme, use this.
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/tab_indicator_holo.xml
and get all the resources and put them into your project. After that, use the link
http://joshclemm.com/blog/?p=136
and modify it to work as you want.
Your Layout file
<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabHost">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dip"
android:layout_marginRight="0dip"
android:background="#000">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</FrameLayout>
Code - same as josh clemm
mTabHost=(TabHost)getActivity().findViewById(R.id.tabHost);
mTabHost.setup();
//mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);
setupTab(new TextView(getActivity()), "Tab 1");
setupTab(new TextView(getActivity()), "Tab 2");
setupTab(new TextView(getActivity()), "Tab 3");
private void setupTab(final View view, final String tag) {
View tabview = createTabView(mTabHost.getContext(), tag);
TabHost.TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {return view;}
});
mTabHost.addTab(setContent);
}
private static View createTabView(final Context context, final String text) {
View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText(text);
return view;
}
And then tab_bg file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/tab_selector"
android:padding="10dip" android:gravity="center" android:orientation="vertical">
<TextView android:id="#+id/tabsText" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"
android:textSize="15dip" android:textColor="#android:color/white" />
</LinearLayout>

In res/values/styles.xml, change the theme parent to "android:Theme.Holo" instead of "android:Theme.Holo.Light"
This will change the entire app's theme obviously, but you can also use different styles for different activities.

how to get this tabbar

how to get the following design of a tabbar
When a tab is been selected the the curve button must visible in the particular tab and the other to be in common.
i thought of adding a fixed background color to be red and i am to place the buttons of an image with curve and without curve. But i want to know whether it gets fixed for all android device, because wat to be the button height and width ? how to set a tabbar of fixed height and width....

I found by a simple way as follows
To get the redline at the bottom of the tabbar i have added a view under the tab as follows
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearLayout1"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_weight="0">
</TabWidget>
<View android:layout_width="fill_parent" android:layout_height="4dip" android:background="#ff0000" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabcontent"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
</TabHost>
Then my tabbar class is as follows
public class CustomTabActivity extends TabActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.tabbar);
addTab1(FirstTab.class);
addTab2(SecondTab.class);
addTab3(FirstTab.class);
addTab4(SecondTab.class);
}
private void addTab1( Class<?> c)
{
TabHost tabHost = getTabHost();
Intent intent = new Intent(this, c);
TabHost.TabSpec spec = tabHost.newTabSpec("tab");
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}
}
My tab_indicator layout is as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/tab1">
</ImageView>
</RelativeLayout>
the tab1 in the drawable is an Selector xml file as follows
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false" android:drawable="#drawable/home" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/home_select_btn" />
</selector>
Here i have added the selected image with a bend and unselected image without bend, that i want to show.
This way seems to be a very long but i feel it to be the same design which i needed.

Maybe this example will be useful to you. It is the same kind of navigation that Google+ application has.

Looking for a universal TabHost style that will work on Android, HTC Sense, Samsung, etc. skins

The default style for the Android TabHost works fine for straight Android systems. However, on HTC Sense, they use dark text on a dark background, which is unreadable.
What's the easiest way to have a TabHost that has visible text across all the various flavors of android skins? I would prefer to not have to make a completely custom look-and-feel if possible.
My targetSDK is 10 and my minSDK is 7.

I'll give you the advise to get completely independent from the TabWidget and create your own Navigation, which you can customize however you want and don't bother with the stiff TabWidget. I don't mean to throw away the awesome TabHost, because it's easy to use the TabHost with a custom navigation:
First set your TabWidget as gone:
<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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
And then create you own navigation in place of it. You could also create a menu (with the hardware menu button) or something like this:
<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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
<!-- content of your tabs-->
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/slider_stub"
android:background="#color/overview_banner_bg_down"/>
<!-- custom slider with horizontal scrollable radio buttons-->
<com.example.WrappingSlidingDrawer
android:id="#+id/tab_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:handle="#+id/tab_slider_handle"
android:content="#+id/tab_scroller">
<RelativeLayout
android:id="#+id/tab_slider_handle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/def_slider">
</RelativeLayout>
<HorizontalScrollView
android:id="#+id/tab_scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="false"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:scrollbarTrackHorizontal="#drawable/scrollbar_horizontal_track"
android:scrollbarThumbHorizontal="#drawable/scrollbar_horizontal_thumb"
android:fillViewport="true"
android:scrollbarSize="3dip"
android:fadingEdgeLength="80dp"
android:background="#343534">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RadioGroup
android:id="#+id/custom_tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal"
android:checkedButton="#+id/tab_overview">
<RadioButton
android:id="#+id/tab_overview"
android:layout_height="55dp"
android:layout_width="55dp"
android:button="#null"
android:background="#drawable/def_checktab_overview"/>
<RadioButton
android:id="#+id/tab_news"
android:layout_height="55dp"
android:layout_width="55dp"
android:button="#null"
android:background="#drawable/def_checktab_news"/>
.....etc....your tabs......
</RadioGroup>
</RelativeLayout>
</HorizontalScrollView>
</com.example.WrappingSlidingDrawer>
</RelativeLayout>
</TabHost>
What you have to do in code now:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_tab_layout);
setTabs();
RadioGroup tabs = (RadioGroup) findViewById(R.id.custom_tabs);
tabs.setOnCheckedChangeListener(new OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.tab_overview:
getTabHost().setCurrentTab(0);
break;
case R.id.tab_news:
getTabHost().setCurrentTab(1);
break;
....etc.....
}
}
});
}
/**
* Delegate tab creation and adding.
*/
private void setTabs() {
// add the necessary tabs
addTab(R.string.tab_overv_tag, OverviewActivityGroup.class);
addTab(R.string.tab_news_tag, NewsActivityGroup.class);
.....etc.....
}
/**
* Create a tab with an Activity and add it to the TabHost
*
* #param tagId
* resource id of the string representing the tag for finding the tab
* #param activity
* the activity to be added
*/
private void addTab(int tagId, Class<? extends ActivityGroup> activity) {
// create an Intent to launch an Activity for the tab (to be reused)
Intent intent = new Intent().setClass(this, activity);
// initialize a TabSpec for each tab and add it to the TabHost
TabHost.TabSpec spec = usedTabHost.newTabSpec(getString(tagId));
// use layout inflater to get a view of the tab to be added
View tabIndicator = getLayoutInflater().inflate(R.layout.tab_indicator, getTabWidget(), false);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
usedTabHost.addTab(spec);
}
The whole indicator stuff is not needed btw.^^ In your ActivityGroups you have to set the appropriate Activities, etc. You know the stuff.
You can use anything for your navigation and can still use the advantages of a TabHost. Just don't bother with that TabWidget anymore. ;)

After some research I think the best option would be to use ActionBar's tabbed interface since it looks much more easier to style. The ActionBarSherlock provides compatibility layer for ActionBar for devices starting from Android 1.6. Here you can look at examples on what you can get using the library.

How to reduce the tab bar height and display in bottom

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

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;

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);

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;
}

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:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="1dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="60dp"
android:layout_alignParentBottom="true" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="1dp">
</FrameLayout>
</RelativeLayout>

Most likely you'll have to implement tabs by your own. As far as I know that's impossible with regular android tabs.

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

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