Icon in Tab is not showing up

android

Solution

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.

Problem

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 want to see both on screen. Can somebody give me advice? ``` public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Usuario usu = new Usuario(); usu.nombre = "fsdf"; lista.add(usu); adaptador = new AdaptadorCelda(this,lista); ListView lstView = (ListView)findViewById(R.id.lista); lstView.setAdapter(adaptador); Button btn = (Button)findViewById(R.id.btnSalva); btn.setOnClickListener(onSave); Resources res = getResources(); TabHost tabs=(TabHost)findViewById(R.id.tabhost); tabs.setup(); TabHost.TabSpec spec=tabs.newTabSpec("mitab1"); spec.setContent(R.id.tab1); spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate)); tabs.addTab(spec); spec=tabs.newTabSpec("mitab2"); spec.setContent(R.id.tab2); spec.setIndicator("ddd", res.getDrawable(android.R.drawable.presence_invisible)); tabs.addTab(spec); tabs.setCurrentTab(0); spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate)) In this case icon appears. spec.setIndicator("ddd", res.getDrawable(android.R.drawable.presence_invisible)); ``` and here is the main.xml ``` <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/lblNombre" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginTop="17dp" android:text="Nombre" android:textAppearance="?android:attr/textAppearanceLarge" /> <EditText android:id="@+id/txtNombre" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/lblNombre" android:layout_marginLeft="35dp" android:layout_toRightOf="@+id/lblNombre" android:ems="10" > <requestFocus /> </EditText> <EditText android:id="@+id/txtApellido" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/txtNombre" android:layout_below="@+id/txtNombre" android:ems="10" /> <TextView android:id="@+id/lblApellido" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/txtApellido" android:layout_alignParentLeft="true" android:text="Apellidos" android:textAppearance="?android:attr/textAppearanceLarge" /> <RadioGroup android:id="@+id/tipos" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/txtApellido" android:layout_marginTop="35dp" android:layout_toLeftOf="@+id/txtApellido" > <RadioButton android:id="@+id/rdbAlta" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="alta" /> <RadioButton android:id="@+id/rdbBaja" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="baja" /> <RadioButton android:id="@+id/rdbTramite" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tramite" /> </RadioGroup> <Button android:id="@+id/btnSalva" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/txtApellido" android:layout_alignTop="@+id/tipos" android:layout_marginLeft="58dp" android:layout_marginTop="30dp" android:text="Button" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_below="@+id/txtApellido" android:src="@drawable/ic_menu_chart" /> </RelativeLayout> <LinearLayout android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/lista" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/tipos" android:layout_marginTop="24dp" > </ListView> </LinearLayout> </FrameLayout> ```

Original source