Change TabBar text and Image Dynamically in android.

By | July 26, 2011

In one of the previous example I have showed you how to use the Tabbars. In this example I will show you how to change the Tabbar name and image when you click the tab.

Copy the same example from this post and change the tabbars.java to this.
After running it click on the tabbar to see the text changing.

package com.coderzheaven;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.TabSpec;

public class tabbar extends TabActivity {
	TabWidget tw;
	TabHost tabHost;
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        /** TabHost will have Tabs */
        final TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

        /** TabSpec used to create a new tab.
         * By using TabSpec only we can able to setContent to the tab.
         * By using TabSpec setIndicator() we can set name to tab. */

        /** tid1 is firstTabSpec Id. Its used to access outside. */
        TabSpec firstTabSpec = tabHost.newTabSpec("tab_id1");
        TabSpec secondTabSpec = tabHost.newTabSpec("tab_id2");
        TabSpec thirdTabSpec = tabHost.newTabSpec("tab_id3");

        /** TabSpec setIndicator() is used to set name for the tab. */
        /** TabSpec setContent() is used to set content for a particular tab. */
        firstTabSpec.setIndicator("First").setContent(new Intent(this,FirstTab.class));
        secondTabSpec.setIndicator("Second ").setContent(new Intent(this,SecondTab.class));
        thirdTabSpec.setIndicator("Third").setContent(new Intent(this,ThirdTab.class));

        /** Add tabSpec to the TabHost to display. */
        tabHost.addTab(firstTabSpec);
        tabHost.addTab(secondTabSpec);
        tabHost.addTab(thirdTabSpec);

        tw = getTabWidget();
        View tab1View = tw.getChildAt(0);
        tab1View.setId(1);

        View tab2View = tw.getChildAt(1);
        tab2View.setId(2);

        View tab3View = tw.getChildAt(2);
        tab3View.setId(3);

        tab1View.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				((TextView)tabHost.getTabWidget().getChildAt(v.getId()-1).findViewById(android.R.id.title)).setText("my Tab " + v.getId());
			}
		});

        tab2View.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				((TextView)tabHost.getTabWidget().getChildAt(v.getId()-1).findViewById(android.R.id.title)).setText("my Tab " + v.getId());
			}
		});

        tab3View.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				((TextView)tabHost.getTabWidget().getChildAt(v.getId()-1).findViewById(android.R.id.title)).setText("my Tab " + v.getId());
			}
		});
    }

}

Please leave your valuable comments.

Leave a Reply

Your email address will not be published. Required fields are marked *