Android TabHost Tutorial - Part 1

Here we are going to see about simple tabhost example. To use TabHost in android we need to extends the main class with TabActivity.
To display a Tab Bar, we need 3 things.

  • TabHost ( main container of tab view )
  • TabWidget ( used to navigate between tabs )
  • FrameLayout ( for tab content )

Files Used:-

  • TabBarExample.java ( A simple TabHost contains 2 tabs )
  • FirstTab.java ( first tab bar content )
  • SecondTab.java ( second tab bar content )
  • tab.xml ( tabhost design in xml file )

The output will looks similar to

tab.xml

[sourcecode language="xml"]
<?xml version="1.0" encoding="utf-8"?>

<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost">
<LinearLayout android:id="@+id/LinearLayout01"
android:orientation="vertical" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
</LinearLayout>

</TabHost>

[/sourcecode]

TabBarExample.java

This is main activity class this should extends with TabActivity to use TabHost.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class TabBarExample extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab);

/** TabHost will have Tabs */
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("tid1");
TabSpec secondTabSpec = tabHost.newTabSpec("tid1");

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

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

}
}
[/sourcecode]

FirstTab.java

This class contains content for First Tab.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class FirstTab extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

/* First Tab Content */
TextView textView = new TextView(this);
textView.setText("First Tab");
setContentView(textView);

}
}
[/sourcecode]

SecondTab.java

This class contains content for Second Tab.

[sourcecode language="java"]
package com.androidpeople.tab;

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

public class SecondTab extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

/* Second Tab Content */
TextView textView = new TextView(this);
textView.setText("Second Tab");
setContentView(textView);

}
}
[/sourcecode]

AndroidManifest.xml

You need to add the below lines in your AndroidManifest.xml inside the application tag.

[sourcecode language="xml"]
<activity android:name=".FirstTab" />
<activity android:name=".SecondTab" />
[/sourcecode]

That's it :)

You can download the full source code from here

Look at the part2 tutorial
 

Comments

Rich, Thanks :) Now i updated

Rich,
Thanks :) Now i updated the AndroidManifest.xml code in the post. Check it.
what's your Google Dev Phone model ?

Nayab, AndroidManifest.xml

Nayab,
AndroidManifest.xml file code is missing. Please retype your code and submit your comment one more time with your logcat error ( just mention only error ) ..

Yes Vikram, you can able to

Yes Vikram, you can able to do it by using setContent().
Whenever you like to change activity for tab just use setContent().

Hi Vikram, Are you currently

Hi Vikram,
Are you currently in Third tab activity ?.. You need to change activity for current tab itself ?

@Paresh, wat effect ?

@Paresh,
wat effect ?

Ravi, try to use View in

Ravi,
try to use View in setIndicator(). You can easily achieve it.

@Paresh, You can have 4 tabs

@Paresh,

You can have 4 tabs also in tabhost. The text(indicator) will be marque.