How to remove registration or margin in Tabwidget in Android?

Question

I want to create a tabbed application. everything is fine, but when I create a tab. the space between the tabs is too much. I want to remove this add-on or margin, but I do not know how to do it. 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 basic Tablayout style:

 <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 see these two lines

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

So, just create a style for your Tablayout as follows:

  <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

Next to @Bart (tabPaddingStart and tabPaddingEnd), you may need to override this size

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

Answer 3

change the wrap_content attributes to match_parent on each TextView tab in layout.xml.

So, each tab should look like this:

  <TextView android:tag="tab1" android:text="Tab 2" android:layout_width="match_parent" // !! android:layout_height="match_parent" // !! /> 

see here for a difference and explanation of both.