Android TabWidget White Space Issue

Question

I am working on the TabWidget and i am getting a white space between the TabActivity and the Tabs.

I don't know how to remove this white space please can any one help me out how should i remove it, my tab_main.xml is as follows :

<?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" >

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

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

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

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

I tried to put background color of TabWidget to android:color:transparent but still same white space comes between the Activity and the Tab.

I do not want any separation space between my Activity and the Tabs (Is it possible to do it?)

Please can any one suggest me how to get rid of this white space.

Answer 1

The output you've shown most likely suggests a Margin/Padding error, rather than a layout error. Either your TabWidget or your FrameLayout could have a margin getting inherited by the overall theme that you're using.

Most likely the following will fix the problem (note the extra margin/padding styles):

        <FrameLayout
            android:layout_marginBottom="0dip"
            android:layout_paddingBottom="0dip"
            android:background="@android:color/holo_green_light"
            android:id="@android:id/tabcontent"
            ....
            .... />

        <TabWidget
            android:layout_marginTop="0dip"
            android:layout_paddingTop="0dip"
            android:background="@android:color/holo_blue_light"
            android:id="@android:id/tabs"
            ....
            .... />

Your FrameLayout could also have any nested components which have a margin/padding, and which in turn may cause the white space. I've added the android:background to both the FrameLayout and the TabWidget, just to help troubleshoot if there is any white space in between.

You said that you've tried putting background color of the TabWidget to transparent - but it won't help, because if there is a margin - then the underlying activity's background color shows up as white, below the transparent area. If you set the overall RelativeLayout's background color to something like blue - then you will see the blue coming through. So fix the margin/padding rather than trying to hide it.

Answer 2

It Look's Like you are having similar issue as i was having in my project, check out this project and try to implement the drawable xml files and provide your TabWidget with the specific custom dimensions as given in this project. It will surely work for you.

Answer 3

From your screen shot, it looks like you are using a WebView. Webview comes with a default margin and padding > 0. You can set the padding and margin to zero by overriding the WebView's body tag, or using css.

For further details, please see the answers to the following SO question:

Remove unwanted white space in webview