Thursday, August 18, 2011

Android TabHost Widget Tutorial

A TabHost widget is a good way to display multiple sets of information in one screen.  By tapping on the tabs at the top of the screen, the bottom of the screen changes to reflect information in each tab.  This tutorial will explain the components used in tabbed screens as well as example xml and java code.

Preview


The Layout Components
A tab activity consists of three major components within the layout.

  • A TabHost - contains the whole tab functionality
  • A tab widget - this flips the tabs and the tab contents
  • A FrameLayout - contains the content of each tab

















The Files Used
  • main.xml - to layout the tab activity
  • Main.java - to activate the tabs
  • Tab1.java - to display content of tab 1
  • Tab2.java - to display content of tab 2
  • modified AndroidManifest.xml

Step 1: Start a New Android Project
Click File>New>Android Project.  In the Project Name: field enter TabHost Widget Project.  Select the latest API level you are comfortable with (API 10 for me).  In the Package Name: field enter com.androgue.tabhostwidget.  In the Create Activity: field enter main(no caps) for the initial activity. Click finish.

Step 2: Modify your AndroidManifest.xml File
You need to modify your AndroidManifest file to reflect the new java classes you will be adding to the project.  Add the following code to your AndroidManifest.xml.

    

    
        
            
                
                
            
        
        
        
		
        
    


Step 3: Modify your main.xml file
Your main.xml file is going to establish what you see on the screen.  Add the following code to your main.xml file.

	
        
        
    
	

Step 4: Update your Main.java file
The main java file is going to create each tab and actuate it when the user tabs a tab.  Add the following code to your Main.java file.
package com.androgue.tabhostwidget;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;

public class Main extends TabActivity 
{
    @Override
    public void onCreate(Bundle icicle) 
    {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        
        TabHost tabHost = getTabHost();
        TabHost.TabSpec spec;
        Intent intent;

        intent = new Intent().setClass(this, Tab1.class);
        spec = tabHost.newTabSpec("tab1").setIndicator("Tab 1").setContent(intent);
        tabHost.addTab(spec);
        
        intent = new Intent().setClass(this, Tab2.class);
        spec = tabHost.newTabSpec("tab2").setIndicator("Tab 2").setContent(intent);
        tabHost.addTab(spec);
        
        tabHost.setCurrentTab(0);
    }
}

Step 5: Set up your Tab1.java and Tab2.java
Each of your Tab java files creates the content for each of your tabs.  This can be test, images or subactivities.  Add the following code to each of the java files.
package com.androgue.tabhostwidget;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class Tab1 extends Activity
{
	public void onCreate(Bundle icicle)
	{
		super.onCreate(icicle);
		
		TextView textView = new TextView(this);
		textView.setText("This is the content that goes to the first Tab");
		setContentView(textView);
	}
}
package com.androgue.tabhostwidget;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class Tab2 extends Activity
{
	public void onCreate(Bundle icicle)
	{
		super.onCreate(icicle);
		
		TextView textView = new TextView(this);
		textView.setText("This is the content that goes to the second Tab");
		setContentView(textView);
	}
}

Step 6: Run your App
Your app is now complete.  Start your favorite emulator and run the app.


Download the Source Code
com.androgue.tabhostwidget (.zip, 48k)

2 comments:

  1. This tab host application is not working in my 2.1 platform.

    it shows an error like
    "Application has stopped unexpectedly.please try again,the only choice is force close"
    what can i do

    ReplyDelete
  2. is there any way that i can create dynamically?
    eg: i have an application where i need to show details of each Node in each Tab. No. of tabs is depends on no. of Nodes which varies. But before creating TabActivity i will come to know how many Nodes are there.

    ReplyDelete