Android removes space between tabs in tabwidget

Question

I created a tabbed application, like in HelloTabActivity, there is also a space between these tabs, can anyone suggest how to remove this space, and there is also a gray line under the tabs, how can I delete it?

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="@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" android:padding="5dp" > <HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scrollbars="none"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" /> </LinearLayout> </TabHost> </LinearLayout> 

styles.xml

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomTheme" parent="@android:style/Theme"> <item name="android:tabWidgetStyle">@style/CustomTabWidget</item> </style> <style name="CustomTabWidget" parent="@android:style/Widget.TabWidget"> <item name="android:textAppearance">@style/CustomTabWidgetText</item> </style> <style name="CustomTabWidgetText" parent="@android:style/TextAppearance.Widget.TabWidget"> <item name="android:textSize">10sp</item> <item name="android:textStyle">bold</item> <item name="android:textColor">#1589FF</item> <item name="android:padding">3dip</item> </style> </resources> 

activity

 public class InfralineTabWidget extends TabActivity{ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources res = getResources(); // Resource object to get Drawables TabHost tabHost = (TabHost)getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent intent; // Reusable Intent for each tab // Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent().setClass(this, TopNewsActivity.class); // Initialize a TabSpec for each tab and add it to the TabHost spec = tabHost.newTabSpec("topNews").setIndicator("Top News", res.getDrawable(R.drawable.tab_news)).setContent(intent); tabHost.addTab(spec); // Do the same for the other tabs intent = new Intent().setClass(this, PowerActivity.class); spec = tabHost.newTabSpec("power").setIndicator("Power", res.getDrawable(R.drawable.tab_power)).setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, EnergyActivity.class); spec = tabHost.newTabSpec("energy").setIndicator("Renewable Energy", res.getDrawable(R.drawable.tab_energy)).setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, CoalActivity.class); spec = tabHost.newTabSpec("coal").setIndicator("Coal", res.getDrawable(R.drawable.tab_coal)).setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, OilnGasActivity.class); spec = tabHost.newTabSpec("oilnGas").setIndicator("Oil & Gas", res.getDrawable(R.drawable.tab_oilngas)).setContent(intent); tabHost.addTab(spec); tabHost.setCurrentTab(0); tabHost.getTabWidget().getChildAt(0).setLayoutParams(new LinearLayout.LayoutParams(100,25)); tabHost.getTabWidget().getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(100,25)); tabHost.getTabWidget().getChildAt(2).setLayoutParams(new LinearLayout.LayoutParams(100,25)); tabHost.getTabWidget().getChildAt(3).setLayoutParams(new LinearLayout.LayoutParams(100,25)); tabHost.getTabWidget().getChildAt(4).setLayoutParams(new LinearLayout.LayoutParams(100,25)); } } 

Now I want to remove the black spaces between the tabs, and it should look like they are connected, and also I cannot remove the gray line under the tabs.

thank

Answer 1

To remove the gray line at the bottom of your tab, you can set

 tabHost.getTabWidget().setStripEnabled(false); 

How to remove the gap between tabs .. The best way would be to use your own drawable without any paddings. You can use images for this, or you can create the backgrounds of your tabs via xml, say, inside the root <layer_list> element:

 <layer_list> <item android:top="0dp" android:left="0dp" android:right="0dp" android:bottom="0dp"> <shape android:shape="rectangle"> [..] </shape> </item> [..] </layer_list> 

and set the background of your TabWidget for this picture.

There are many tutorials available on the Internet to learn how to set up your tabs. For example, this Josh is short and has a nice explanation.

Update

Here I use a small sample tabwidget, using custom tabs (based on your code) to achieve the following result:

What you need:

• three new layers for drawing (for selected, focused and unselected tab states)
• two displayed states (for text and background different states)
• new tab layout
• update main.xml
• update your activity class
• update androidManifest.xml file (remove style declarations)

Three layers: tab_normal.xml , tab_focused.xml , tab_selected.xml
cooker hood / tab _normal.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="@color/default_back_color" /> </shape> </item> <item android:top="2dp"> <shape android:shape="rectangle"> <gradient android:startColor="#AAAAAA" android:centerColor="#888888" android:endColor="#666666" android:angle="90" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape> </item> <item android:top="4dp" android:left="1dp" android:right="1dp" android:bottom="0dp"> <shape android:shape="rectangle"> <solid android:color="@color/default_back_color" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="8dp" android:topRightRadius="8dp" /> </shape> </item> </layer-list> 

hoods / tab _focused.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="@color/default_back_color" /> </shape> </item> <item android:top="2dp"> <shape android:shape="rectangle"> <gradient android:startColor="#AAAAAA" android:centerColor="#888888" android:endColor="#666666" android:angle="90" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape> </item> <item android:top="4dp" android:left="1dp" android:right="1dp" android:bottom="0dp"> <shape android:shape="rectangle"> <gradient android:startColor="#8F8F8F" android:centerColor="#656565" android:endColor="#3F3F3F" android:angle="90" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="8dp" android:topRightRadius="8dp" /> </shape> </item> </layer-list> 

hoods / tab _selected.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="@color/default_back_color" /> </shape> </item> <item android:top="2dp"> <shape android:shape="rectangle"> <gradient android:startColor="#EEEEEE" android:centerColor="#CCCCCC" android:endColor="#AAAAAA" android:angle="-90" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> </shape> </item> <item android:top="4dp" android:left="1dp" android:right="1dp" android:bottom="0dp"> <shape android:shape="rectangle"> <gradient android:startColor="#EAEAEA" android:centerColor="#9F9F9F" android:endColor="#696969" android:angle="90" /> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" android:topLeftRadius="8dp" android:topRightRadius="8dp" /> </shape> </item> </layer-list> 

Two states: tab_background_selector.xml , tab_text_selector.xml
cooker hood / tab _background_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/tab_selected"/> <item android:state_selected="false" android:state_focused="false" android:state_pressed="false" android:drawable="@drawable/tab_normal" /> <item android:state_pressed="true" android:drawable="@drawable/tab_focused"/> <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected"/> </selector> 

hoods / tab _text_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="#1589FF" /> <item android:state_focused="true" android:color="#1589FF" /> <item android:state_pressed="true" android:color="@android:color/white" /> <item android:color="#F0F0F0" /> </selector> 

New tab layout: tab.xml
layout /tab.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/tab_background_selector" android:gravity="center" android:orientation="vertical" android:padding="5dp"> <ImageView android:id="@+id/tab_icon" android:layout_width="30dp" android:layout_height="30dp" android:scaleType="fitCenter" /> <TextView android:id="@+id/tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:textStyle="bold" android:gravity="center_horizontal" android:textSize="10sp" android:padding="3dip" android:ellipsize="marquee" android:textColor="@drawable/tab_text_selector" /> </LinearLayout> 

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="@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:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" /> </LinearLayout> </TabHost> </LinearLayout> 

InfralineTabWidget.java

 public class InfralineTabWidget extends TabActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final TabHost tabHost = (TabHost) getTabHost(); tabHost.addTab(createTab(TopNewsActivity.class, "topNews", "Top News", R.drawable.tab_news)); tabHost.addTab(createTab(PowerActivity.class, "power", "Power", R.drawable.tab_power)); tabHost.addTab(createTab(EnergyActivity.class, "energy", "Renewable Energy", R.drawable.tab_energy)); tabHost.addTab(createTab(CoalActivity.class, "coal", "Coal", R.drawable.tab_coal)); tabHost.addTab(createTab(OilnGasActivity.class, "oilnGas", "Oil & Gas", R.drawable.tab_oilngas)); tabHost.setCurrentTab(0); tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 140; tabHost.getTabWidget().getChildAt(1).getLayoutParams().width = 140; tabHost.getTabWidget().getChildAt(2).getLayoutParams().width = 140; tabHost.getTabWidget().getChildAt(3).getLayoutParams().width = 140; tabHost.getTabWidget().getChildAt(4).getLayoutParams().width = 140; } private TabSpec createTab(final Class<?> intentClass, final String tag, final String title, final int drawable) { final Intent intent = new Intent().setClass(this, intentClass); final View tab = LayoutInflater.from(getTabHost().getContext()). inflate(R.layout.tab, null); ((TextView)tab.findViewById(R.id.tab_text)).setText(title); ((ImageView)tab.findViewById(R.id.tab_icon)).setImageResource(drawable); return getTabHost().newTabSpec(tag).setIndicator(tab).setContent(intent); } } 

And this is it.

To create straight corner tabs, simply lose the angle specifications from the drop-down XML file.
Also play around colors, strokes, etc., so that the result matches your preferences.

Answer 2

use android: showDividers = "none" in xml layout.

 <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:showDividers="none" android:layout_height="wrap_content"/> 

Answer 3

If your build target is Honeycomb, you can use the following code.

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

Answer 4

To remove excess tab spacing, you can set the measureWithLargestChild parameter to the tabwidget attribute false

 <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="wrap_content" android:measureWithLargestChild="false"> </TabWidget> 

Answer 5

One magic line.

 mTabHost.getTabWidget().setDividerDrawable(null); 

Done