20

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>

2
  • please give use more information.. May 24, 2012 at 20:55
  • sorry guys, I am a bit newbie.
    – theholy
    May 25, 2012 at 7:13

4 Answers 4

53

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.

6
  • 2
    Brilliant, you should make tutorials. Real easy to read and understand.
    – basickarl
    Nov 5, 2012 at 21:51
  • Also I seem to be using the more up-to-date fragments. Any idea of how to implement this into fragments instead of via the old TabActivity?
    – basickarl
    Nov 6, 2012 at 0:20
  • 2
    This approach also takes away the "thin line" under the image/text when the tab is selected.
    – basickarl
    Nov 6, 2012 at 0:36
  • 2
    do you know why android engineers are doing such favors to developers? May 24, 2013 at 6:53
  • 6
    The tutorial seems to be offline, but still at the Internet Archive: web.archive.org/web/20120925030428/http://ondrejcermak.info/…
    – rbp
    Jul 26, 2013 at 13:32
9

This is a easy way to show the text and icon in ICS. After to setup the Tabhost, I call the next methods:

setTabIcon(mTabHost, 0, R.drawable.ic_tab1); //for Tab 1
setTabIcon(mTabHost, 1, R.drawable.ic_tab2); //for Tab 2

public void setTabIcon(TabHost tabHost, int tabIndex, int iconResource) {
    ImageView tabImageView = (ImageView) tabHost.getTabWidget().getChildTabViewAt(tabIndex).findViewById(android.R.id.icon);
    tabImageView.setVisibility(View.VISIBLE);
    tabImageView.setImageResource(iconResource);
}

If you want a more advanced solution, you need to create a layout like @sunadorer recommend. My recommendation is that you can create your layout using the holo theme layout, search the file on your sdk_dir/platforms/android-14/data/res/layout/tab_indicator_holo.xml.

My advanced solution is the next, you need to create a layout like this:

tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:paddingTop="5dp"
              android:paddingBottom="5dp"
              style="@android:style/Widget.Holo.Tab">

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:visibility="visible" />

    <TextView
        android:id="@android:id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        style="@android:style/Widget.Holo.ActionBar.TabText" />

</LinearLayout>

In your activity or fragment, create the next function:

public View createTabIndicator(LayoutInflater inflater, TabHost tabHost, int textResource, int iconResource) {
    View tabIndicator = inflater.inflate(R.layout.tab_indicator, tabHost.getTabWidget(), false);
    ((TextView) tabIndicator.findViewById(android.R.id.title)).setText(textResource);
    ((ImageView) tabIndicator.findViewById(android.R.id.icon)).setImageResource(iconResource);
    return tabIndicator;
}

And finally when you create your tab in your activity or fragment use the next code:

mTabHost.addTab(
    mTabHost.newTabSpec("tab1")
    .setIndicator(createTabIndicator(inflater, mTabHost, R.string.tab1, R.drawable.ic_tab1))
    .setContent(R.id.tab1)
);

I have tested this solution in ICS and works fine.

Good luck :)

2
  • 1
    i m getting error in this line NPE : ImageView tabImageView = (ImageView) tabHost.getTabWidget().getChildTabViewAt(tabIndex).findViewById(android.R.id.icon); Jan 10, 2015 at 8:31
  • Note that if you have several tabs you might see the text wrapping even when it appears there is plenty of room. The fix for this is setting paddingStart="0dp" and paddingEnd="0dp" in the LinearLayout.
    – N R
    Mar 8, 2019 at 16:04
5

There is another very simple solution for this.

It seems that the issue is in new Holo theme and TabWidget. So what you should do is define Holo theme in your values-v11 folder but with the old TabWidget style like this:

<style name="MyAppTheme" parent="@android:style/Theme.Holo.NoActionBar">
    <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item>
</style>

It works for me, hope it helps someone.

1
  • You need to add this line into values-v14 & upper version folder also. Oct 19, 2016 at 10:58
2

I try the following way to do it and it works fine:

  1. using setIndicator("TAB") to set text only.
  2. using setBackgroundDrawable(-) to set icon.

Sample code:

    final TabHost               tabHost = (TabHost)findViewById(android.R.id.tabhost);
    final Resources             res = getResources();
    int i;

    tabHost.setup(); //Call setup() before adding tabs if loading TabHost using findViewById(). 

    TabHost.TabSpec ts = tabHost.newTabSpec("trackinfo");
    //ts.setIndicator("", res.getDrawable(R.drawable.icon_trackinfo));
    ts.setIndicator("Track Information");
    ts.setContent(R.id.tabTrackInfo);
    tabHost.addTab(ts);

    TabHost.TabSpec ts2 = tabHost.newTabSpec("collection");
    //ts2.setIndicator("", res.getDrawable(R.drawable.icon_collection_gray));
    ts2.setIndicator("My Collection");
    ts2.setContent(R.id.tabMyCollecton);
    tabHost.addTab(ts2);

    tabHost.setOnTabChangedListener(new OnTabChangeListener(){
        @Override
        public void onTabChanged(String tabId) 
        {
            if("trackinfo".equals(tabId)) {
                //
                TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
                View tabView = tw.getChildTabViewAt(0);
                TextView tv = (TextView)tabView.findViewById(android.R.id.title);
                tv.setTextColor(TabColor[0]);
                tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected));

                tabView = tw.getChildTabViewAt(1);
                tv = (TextView)tabView.findViewById(android.R.id.title);
                tv.setTextColor(TabColor[1]);

                tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray));
            }
            if("collection".equals(tabId)) {
                //
                TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
                View tabView = tw.getChildTabViewAt(0);
                TextView tv = (TextView)tabView.findViewById(android.R.id.title);
                tv.setTextColor(TabColor[1]);
                tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray));

                tabView = tw.getChildTabViewAt(1);
                tv = (TextView)tabView.findViewById(android.R.id.title);
                tv.setTextColor(TabColor[0]);
                tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected));

        }
        }}); // END OF tabHost.setOnTabChangedListener

    // After Tabs being added
    // change font settings 
    TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
    for(i=0;i<2;i++)
    {
        View tabView = tw.getChildTabViewAt(i);
        TextView tv = (TextView)tabView.findViewById(android.R.id.title);
        tv.setHeight(25);
        tv.setTextColor(TabColor[i]);
        tv.setTypeface(Typeface.SANS_SERIF, Typeface.BOLD_ITALIC);
        tv.setTextSize(20);      
        tabView.setBackgroundDrawable(res.getDrawable(TabIcon[i]));

    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.