How can remove padding or margin in Tabwidget in android?

Question

I want to create tabbed application. everything is allright but when I create the tab. the space between the tabs too much. I want to remove this padding or margin but I don't know how can i do that. any suggestion?

XML

<?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">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="none" >
    <TabWidget
        android:id="@android:id/tabs"
        android:padding="0px"
        android:layout_margin="0px"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:tag="tab0"
            android:text="Tab 1"
            android:padding="0px"
            android:layout_margin="0px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            />
        <TextView
            android:tag="tab1"
            android:text="Tab 2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab2"
            android:text="Tab 3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab3"
            android:text="Tab 4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab4"
            android:text="Tab 5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab5"
            android:text="Tab 6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab6"
            android:text="Tab 7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab7"
            android:text="Tab 8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab8"
            android:text="Tab 9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <TextView
            android:tag="tab9"
            android:text="Tab 10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

    </TabWidget>
    </HorizontalScrollView>

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

        <TextView
            android:text="Hallo1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo7"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo8"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo9"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <TextView
            android:text="Hallo10"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

    </FrameLayout>
   </LinearLayout>
</TabHost>

here is my code:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
    tabHost.setup();

    final TabWidget tabWidget = tabHost.getTabWidget();
    final FrameLayout tabContent = tabHost.getTabContentView();
    tabHost.getTabWidget().setDividerDrawable(R.drawable.empty);

    // Get the original tab textviews and remove them from the viewgroup.
    TextView[] originalTextViews = new TextView[tabWidget.getTabCount()];
    for (int index = 0; index < tabWidget.getTabCount(); index++) {
        originalTextViews[index] = (TextView) tabWidget.getChildTabViewAt(index);
    }
    tabWidget.removeAllViews();

    // Ensure that all tab content childs are not visible at startup.
    for (int index = 0; index < tabContent.getChildCount(); index++) {
        tabContent.getChildAt(index).setVisibility(View.GONE);
    }

    // Create the tabspec based on the textview childs in the xml file.
    // Or create simple tabspec instances in any other way...
    for (int index = 0; index < originalTextViews.length; index++) {
        final TextView tabWidgetTextView = originalTextViews[index];
        final View tabContentView = tabContent.getChildAt(index);

        TabSpec tabSpec = tabHost.newTabSpec((String) tabWidgetTextView.getTag());
        tabSpec.setContent(new TabHost.TabContentFactory() {
            @Override
            public View createTabContent(String tag) {
                return tabContentView;
            }
        });
        if (tabWidgetTextView.getBackground() == null) {
            tabSpec.setIndicator(tabWidgetTextView.getText());
        } else {
            tabSpec.setIndicator(tabWidgetTextView.getText(), tabWidgetTextView.getBackground());
        }
        tabHost.addTab(tabSpec);
    }


    tabHost.getTabWidget().setDividerDrawable(R.drawable.empty);

    if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
        tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
    }

//      tabHost.setCurrentTab(0);
    }
}

Answer 1

If you look at the base Style of the Tablayout:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

You van see these 2 lines

    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>

So simply create a style for your Tablayout like this:

  <style name="tab_bar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">65dp</item>
        <item name="android:background">@color/backgroundColor</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="tabPaddingStart">0dp</item>
        <item name="tabPaddingEnd">0dp</item>
    </style>

And use the style:

<android.support.design.widget.TabLayout android:id="@+id/tabs"
            app:tabGravity="fill"
            app:tabMode="fixed"
            style="@style/tab_bar"/>

Answer 2

Beside @Bart said (tabPaddingStart and tabPaddingEnd), you may need to override this dimen

<dimen name="design_tab_scrollable_min_width">60dp</dimen>