问题
I have made an application which has tabs like in HelloTabActivity, there is also space between these tabs, can anyone suggest how to remove this space and also there is a grey line beneath the tabs how can that be removed?
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 be like they are connected and also i'm not able to remove the grey line below the tabs.
Thanks
回答1:
For removing the grey line at the bottom of your tabbar, you can set
tabHost.getTabWidget().setStripEnabled(false);
As of removing the gap between the tabs.. The best way would be to use your own drawable without any paddings. You can use images for this, or you can create your tabs' backgrounds via xml's, say inside a <layer_list> root 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 this drawable to be the background of your TabWidget.
To see how to customize your tabs, there are a lot of tutorials on the web. For example this one by Josh is short and has a nice explanation.
Update
Here I share a small sample of tabwidget using custom tabs (based on your code) to achieve the following output:
What you need:
- three new layer drawables (for selected, focused and unselected states of the tabs)
- two state drawables (for the text and background of the different states)
- a new layout for the tabs
- update your
main.xml - update your activity class
- update your androidManifest.xml (remove the style declarations)
The three layer drawables: tab_normal.xml, tab_focused.xml, tab_selected.xml
drawable/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>
drawable/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>
drawable/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>
The two state drawables: tab_background_selector.xml, tab_text_selector.xml
drawable/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>
drawable/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>
The new layout for the tabs: 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 cornered tabs, just lose the corner specifications from the layer drawable xml files.
Also play around the colors, strokes, etc., to make the outcome fit your preferences.
回答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"/>
回答3:
If your build target is Honeycomb onwards, you may use the following code.
if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}
回答4:
To remove the excess gap between the tabs one can set measureWithLargestChild attribute on tabwidget to false
<TabWidget
android:id="@android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:measureWithLargestChild="false">
</TabWidget>
回答5:
One magic line.
mTabHost.getTabWidget().setDividerDrawable(null);
Done
来源：https://stackoverflow.com/questions/5799320/android-remove-space-between-tabs-in-tabwidget