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

view source

print?

01	<?xml version="1.0" encoding="utf-8"?>

02

03	<TabHost android:layout_width="fill_parent"

04	android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"

05	android:id="@android:id/tabhost">

06	<LinearLayout android:id="@+id/LinearLayout01"

07	android:orientation="vertical" android:layout_height="fill_parent"

08	android:layout_width="fill_parent">

09	<TabWidget android:id="@android:id/tabs"

10	android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>

11	<FrameLayout android:id="@android:id/tabcontent"

12	android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>

13	</LinearLayout>

14

15	</TabHost>

TabBarExample.java

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

view source

print?

01	package com.androidpeople.tab;

02

03	import android.app.TabActivity;

04	import android.content.Intent;

05	import android.os.Bundle;

06	import android.widget.TabHost;

07	import android.widget.TabHost.TabSpec;

08

09	public class TabBarExample extends TabActivity {

10	/** Called when the activity is first created. */

11

@Override

12	public void onCreate(Bundle savedInstanceState) {

13	super.onCreate(savedInstanceState);

14	setContentView(R.layout.tab);

15

16	/** TabHost will have Tabs */

17	TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

18

19	/** TabSpec used to create a new tab.

20	* By using TabSpec only we can able to setContent to the tab.

21	* By using TabSpec setIndicator() we can set name to tab. */

22

23	/** tid1 is firstTabSpec Id. Its used to access outside. */

24	TabSpec firstTabSpec = tabHost.newTabSpec("tid1");

25	TabSpec secondTabSpec = tabHost.newTabSpec("tid1");

26

27	/** TabSpec setIndicator() is used to set name for the tab. */

28	/** TabSpec setContent() is used to set content for a particular tab. */

29	firstTabSpec.setIndicator("First Tab Name").setContent(new Intent(this,FirstTab.class));

30	secondTabSpec.setIndicator("Second Tab Name").setContent(new Intent(this,SecondTab.class));

31

32	/** Add tabSpec to the TabHost to display. */

33	tabHost.addTab(firstTabSpec);

34	tabHost.addTab(secondTabSpec);

35

36

}

37

}

FirstTab.java

This class contains content for First Tab.

view source

print?

01	package com.androidpeople.tab;

02

03	import android.app.Activity;

04	import android.os.Bundle;

05	import android.widget.TextView;

06

07	public class FirstTab extends Activity {

08	/** Called when the activity is first created. */

09

@Override

10	public void onCreate(Bundle savedInstanceState) {

11	super.onCreate(savedInstanceState);

12

13	/* First Tab Content */

14	TextView textView = new TextView(this);

15	textView.setText("First Tab");

16	setContentView(textView);

17

18

}

19

}

SecondTab.java

This class contains content for Second Tab.

view source

print?

01	package com.androidpeople.tab;

02

03	import android.app.Activity;

04	import android.os.Bundle;

05	import android.widget.TextView;

06

07	public class SecondTab extends Activity {

08	/** Called when the activity is first created. */

09

@Override

10	public void onCreate(Bundle savedInstanceState) {

11	super.onCreate(savedInstanceState);

12

13	/* Second Tab Content */

14	TextView textView = new TextView(this);

15	textView.setText("Second Tab");

16	setContentView(textView);

17

18

}

19

}

AndroidManifest.xml

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

view source

print?

1	<activity android:name=".FirstTab" />

2	<activity android:name=".SecondTab" />

That’s it

You can download the full source code from here

Look at the part2 tutorial

TabBar1.zip

출처 : http://www.androidpeople.com/android-tabhost-tutorial-part-1/