Icon in Tab is not showing up

Question

I\'m starting with Android and when I try to do a TabHost with an icon and a text. Only the text is visible, if I left the text in blank it is possible to see the icon. I wa

Answer 1

Have you tested your app on a device running Ice Cream Sandwich? I noticed recently, that the default TabHost behaves differently depending on the target device and the android platform version.

Running an app that provides an icon and a text to setIndicator (as in the source from the question), had the following test result:

• Phone with Android 2.1: both icon and text where shown (Label below the Icon as expected)
• Phone with 4.0.3: The icons didn't show and only the text was visible.
• Tablet running ICS: the tabs where shown with icon and text

As you found out too, replacing the label with an empty string the icons appeared on the Phone - but then the user would need to guess the meaning of the icons. Apart from that: When running this version of the app on the pre ICS phone: The tabs keep their size and leave an empty area below the image.

To change this device driven decision on how much space the tabs should get, I found the solution in this tutorial on how to customize tabs:

First you need to provide your own tab indicator layout ("layout/tab_indicator.xml" in the tutorial) including an ImageView and a TextView. Then you tell the TabSpec to use this via setIndicator. And voilà: you get the icon and the label on the phone with ICS too.

Here is the important part on how to set up the indicator (this = the current activity):

TabHost.TabSpec spec = this.getTabHost().newTabSpec(tag);

View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
((TextView) tabIndicator.findViewById(R.id.title)).setText(label);
((ImageView) tabIndicator.findViewById(R.id.icon)).setImageResource(drawableResourceId);

spec.setIndicator(tabIndicator);

If you like the same look of the tabs on older and newer phones have an additional look here: http://jgilfelt.github.com/android-actionbarstylegenerator/. This page generates images and styles to customize the action bar including the tabs and helped me figure out how the 9-patch background images need to be defined.