Android TabHost Tutorial
Android TabHost Tutorial
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 :)