![\"TabHost](\"\/ui\/wp-content\/uploads\/2016\/04\/TabHost-in-Android.jpg\")
<\/p>\nIn Android, TabHost is a Container for tabbed window view. This object holds two children one is set of tab labels that the user clicks to select a specific tab and other is a FrameLayout object that displays the content of that page.<\/p>\n
Whenever we need to enter or display a lot of information in one activity. A simple and effective method is to use tabs in your interface form which is done using TabHost in Android.<\/p>\n
<\/p>\n
Important\u00a0Note:<\/strong><\/span> A Tabhost holds two children\u2019s from which one is use to set the labels that the users clicks to select tab other is a FrameLayout that is used to display the content of that page. It means when you select any label (or you can say change the tab) the FrameLayout is used to display the content for that particular tab.<\/p>\n Important\u00a0Note:<\/strong><\/span> For Using TabHost in our MainActivity we need to extend TabActivity instead of Activity.<\/p>\n In Below code snippet we shows the TabHost with TabWidget and a FrameLayout.<\/p>\n In Android, A tab has a tab indicator, content, and a tag that is used to keep track of it. This builder helps us to choose among these options. For the tab indicator our choices are set a label or set a label and an icon both together. For the tab content our choices are the id of View, a TabHost.TabContentFactory that creates the view content and an Intent that launches an Activity.<\/p>\n Let\u2019s discuss some common methods of a TabSpec which are used to specify the indicator and content for a Tab.<\/p>\n 1. setIndicator(CharSequence label):<\/strong><\/span> This method is used to set the text to show on tab. In this we specify CharSequence type value to display a label for Tab.<\/p>\n Below we set the \u201cTab 1\u201d as an indicator ( label ) for a tab.<\/p>\n Important Note:<\/strong><\/span>\u00a0Mostly all methods described here needs to be used to make TabHost work. So do refer to the example at the end of\u00a0this article to learn how to use all these method to create TabHost in Android.<\/p>\n 2. setIndicator(CharSequence label,Drawable icon):<\/strong><\/span> This method is used to Specify a label and icon as the tab indicator. In this method you specify char sequence type value to display a label for tab and drawable to display an icon on tab.<\/p>\n Below we set the \u201cTab 1\u201d as an indicator ( label ) and ic_launcher icon for a tab.<\/p>\n 3. setContent(Intent intent):<\/strong><\/span> This method is used to specify an intent to use to launch an activity as the tab content. Whenever a user click on this tab an activity is open and display the content.<\/p>\n Below we set an intent that is used to launch an activity as the tab content.<\/p>\n Let\u2019s discuss some important\u00a0methods of a TabHost which are used to configure Tabs in our application.<\/p>\n 1. addTab(TabSpec\u00a0tabSpec):<\/strong> <\/span>This method is used to add a tab onto a tab widget. Whenever we specify a new tab using TabSpec class we need to add that tab in our TabHost.<\/p>\n Below is an example code with explanation in which we specify a tab using TabSpec class and then add that tab in our tab host using addTab method.<\/p>\n 2. clearAllTabs():<\/strong><\/span> This method is used to remove all the tabs from the tab widget associated with TabHost.<\/p>\n Below is an example code in which Firstly we add two tabs and then remove all the tabs from a tab widget.<\/p>\n 3. setCurrentTab(int index):<\/strong><\/span> This method is used to set the current selected tab from the tab widget. By default a tab host set first tab as current tab but we can change it by using this function.<\/p>\n Below is an example code in which firstly we add two tabs and then set the second tab as current tab.<\/p>\n 4. setOnTabChangedListener(OnTabChangeListenerl):<\/strong><\/span> This method is used to register a callback to be invoked when the selected state of any of the items in this list changes.<\/p>\n Below we show how to use setOnTabChangedListener in TabHost.<\/p>\n Below is the example of TabHost in which we display a TabHost by using Tab Widget and FrameLayout. In this example we display three tabs named home, contact and about by using TabHost.TabSpec where we display static data. We also implement setOnTabChangeListener, so whenever a tab is changed the name of the tab is displayed by using a Toast.<\/p>\n Below you can download complete Android Studio project code, see final output and read step by step explanation:<\/p>\n Download Code<\/a> ? <\/a><\/p>\n Step 1:<\/strong><\/span>\u00a0<\/strong>Create a new project and name it TabHostExample<\/p>\n Step 2:\u00a0<\/strong><\/span>Open res -> layout ->activity_main.xml (or) main.xml and add following code :<\/p>\n In this step we add the code for displaying a TabHost by using TabWidget and Framelayout.<\/p>\n Step 3:<\/span>\u00a0<\/strong>Open src -> package -> MainActivity.java<\/p>\n In this step we add the code to\u00a0initiate the TabHost and then add three tabs home, contact and about by using TabHost.TabSpec where we display static data. We also implement setOnTabChangeListener so whenever a tab is changed the name of the tab is displayed by using a Toast.<\/p>\n For Using TabHost in our MainActivity we need to extend TabActivity instead of Activity.<\/p>\n Step 4:<\/span>\u00a0<\/strong>Now we need 3 activities and 3 xml layouts for three tabs. So create three activities by right click on your package folder and create classes and name them as HomeActivity, ContactActivity and AboutActivity and add the following code respectively.<\/p>\n Right Click on package folder -> New -> Class and create:<\/strong><\/p>\n HomeActivity.class<\/strong><\/p>\n ContactActivity.class<\/strong><\/p>\n AboutActivity.class<\/strong><\/p>\n Step 5:<\/span> <\/strong>\u00a0Now create 3 xml layouts by\u00a0right clicking on res\/layout -> New -> Layout Resource\u00a0<\/strong>File<\/strong> and name them as activity_home, activity_contact and activity_about and add the following code in respective files.<\/p>\n Here we will design the basic simple UI for all the three tabs.<\/p>\n activity_home.xml code:<\/strong><\/p>\n activity_contact.xml:<\/strong><\/p>\n activity_about.xml:<\/strong><\/p>\n Step 6:<\/strong><\/span> Open\u00a0AndroidManifest.xml<\/strong><\/p>\n In this step we open\u00a0Manifest file\u00a0and\u00a0add the code for defining Home, Contact and About activity.<\/p>\n Step 7:<\/strong><\/span> Open Strings.xml<\/strong><\/p>\n Now go to app-> values -> strings.xml and add the below codes. Here we are defining the String that we used in the earlier step.<\/p>\n Output:<\/strong><\/span><\/p>\n Now run the App and you will see 3 tabs in the bottom which we created in TabHost. Now click on any Tab and activity corresponding to it will be open.<\/p>\n","protected":false},"excerpt":{"rendered":" In Android, TabHost is a Container for tabbed window view. This object holds two children one is set of tab labels that the user clicks to select a specific tab and other is a FrameLayout object that displays the content of that page. Whenever we need to enter or display a lot of information in … Continue reading TabHost Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1415","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"
\nBasic\u00a0TabHost XML code:<\/strong><\/h4>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<TabHost xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:id=\"@android:id\/tabhost\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\">\r\n\r\n<LinearLayout\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<FrameLayout\r\nandroid:id=\"@android:id\/tabcontent\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"0dip\"\r\nandroid:layout_weight=\"1\" \/>\r\n\r\n<TabWidget\r\nandroid:id=\"@android:id\/tabs\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_marginBottom=\"-4dp\"\r\nandroid:layout_weight=\"0\" \/>\r\n\r\n<\/LinearLayout>\r\n\r\n<\/TabHost>\r\n<\/pre>\n
![\"TabHost](\"\/ui\/wp-content\/uploads\/2016\/04\/TabHost-UI-in-Android-XML.jpg\")
<\/p>\n
\nTabHost.TabSpec:<\/strong><\/h4>\n
\nImportant Methods Of TabSpec:<\/strong><\/h4>\n
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(\"Tab 1\"); \/\/ set the \u201cTab 1\u201d as an indicator for a tab<\/pre>\n
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(\"Tab 1\",getResources().getDrawable(R.drawable.ic_launcher)); \/\/ set the label and icon an indicator for a tab\r\n<\/pre>\n
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(view); \/\/ set the \u201cTab 1\u201d as an indicator\r\nIntent intent = new Intent(this, MyActivity.class);\r\ntabSpec.setContent(intent); \/\/ specify an intent to use to launch an activity as the tab content\r\n<\/pre>\n
\nImportant Methods Of TabHost:<\/strong><\/h4>\n
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(view); \/\/ set the \u201cTab 1\u201d as an indicator\r\nIntent intent = new Intent(this, MyActivity.class);\r\ntabSpec.setContent(intent); \/\/ specify an intent to use to launch an activity as the tab content\r\ntabHost.addTab(tabSpec); \/\/ add a tab in Tab widget\r\n<\/pre>\n
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(\"Tab 1\"); \/\/ set the \u201cTab 1\u201d as an indicator\r\nIntent intent = new Intent(this, MyActivity.class);\r\ntabSpec.setContent(intent);\r\nTabHost.TabSpec tabSpec1 = tabHost.newTabSpec(\"tab2\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec1.setIndicator(\"Tab 2\"); \/\/ set the \u201cTab 2\u201d as an indicator\r\nIntent intent1 = new Intent(this, MyActivity.class);\r\ntabSpec1.setContent(intent1); \/\/ specify an intent to use to launch an activity as the tab content\r\ntabHost.addTab(tabSpec); \/\/ add first tab in Tab widget\r\ntabHost.addTab(tabSpec1); \/\/ add second tab in Tab widget\r\ntabHost.clearAllTabs(); \/\/ clear all the tabs from tab widget\r\n<\/pre>\n
TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\nTabHost.TabSpec tabSpec = tabHost.newTabSpec(\"tab1\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec.setIndicator(\"Tab 1\"); \/\/ set the \u201cTab 1\u201d as an indicator\r\nIntent intent = new Intent(this, MyActivity.class);\r\ntabSpec.setContent(intent);\r\nTabHost.TabSpec tabSpec1 = tabHost.newTabSpec(\"tab2\"); \/\/ Create a new TabSpec using tab host\r\ntabSpec1.setIndicator(\"Tab 2\"); \/\/ set the \u201cTab 2\u201d as an indicator\r\nIntent intent1 = new Intent(this, MyActivity.class);\r\ntabSpec1.setContent(intent1); \/\/ specify an intent to use to launch an activity as the tab content\r\ntabHost.addTab(tabSpec); \/\/ add first tab in Tab widget\r\ntabHost.addTab(tabSpec1); \/\/ add second tab in Tab widget\r\ntabHost.setCurrentTab(1); \/\/ set second tab as current selected tab\r\n<\/pre>\n
\/\/ perform set on tab changed listener on tab host\r\ntabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {\r\n@Override\r\npublic void onTabChanged(String tabId) {\r\n\/\/ Add code Here\r\n}\r\n});\r\n<\/pre>\n
\nTabHost Example In Android Studio:<\/strong><\/h4>\n
![\"TabHost](\"\/ui\/wp-content\/uploads\/2016\/04\/TabHost-Example-In-Android-Studio.gif\")
<\/p>\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<TabHost xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:id=\"@android:id\/tabhost\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\">\r\n\r\n\r\n<LinearLayout\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<FrameLayout\r\nandroid:id=\"@android:id\/tabcontent\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"0dip\"\r\nandroid:layout_weight=\"1\" \/>\r\n\r\n<TabWidget\r\nandroid:id=\"@android:id\/tabs\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_marginBottom=\"-4dp\"\r\nandroid:layout_weight=\"0\" \/>\r\n\r\n<\/LinearLayout>\r\n\r\n<\/TabHost>\r\n<\/pre>\n
package example.abhiandroid.tabhostexample;\r\n\r\nimport android.app.TabActivity;\r\nimport android.content.Intent;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.widget.TabHost;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends TabActivity {\r\n \/**\r\n * Called when the activity is first created.\r\n *\/\r\n @Override\r\n public void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_main);\r\n\r\n TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); \/\/ initiate TabHost\r\n TabHost.TabSpec spec; \/\/ Reusable TabSpec for each tab\r\n Intent intent; \/\/ Reusable Intent for each tab\r\n\r\n spec = tabHost.newTabSpec(\"home\"); \/\/ Create a new TabSpec using tab host\r\n spec.setIndicator(\"HOME\"); \/\/ set the \u201cHOME\u201d as an indicator\r\n \/\/ Create an Intent to launch an Activity for the tab (to be reused)\r\n intent = new Intent(this, HomeActivity.class);\r\n spec.setContent(intent);\r\n tabHost.addTab(spec);\r\n\r\n \/\/ Do the same for the other tabs\r\n\r\n spec = tabHost.newTabSpec(\"Contact\"); \/\/ Create a new TabSpec using tab host\r\n spec.setIndicator(\"CONTACT\"); \/\/ set the \u201cCONTACT\u201d as an indicator\r\n \/\/ Create an Intent to launch an Activity for the tab (to be reused)\r\n intent = new Intent(this, ContactActivity.class);\r\n spec.setContent(intent);\r\n tabHost.addTab(spec);\r\n\r\n spec = tabHost.newTabSpec(\"About\"); \/\/ Create a new TabSpec using tab host\r\n spec.setIndicator(\"ABOUT\"); \/\/ set the \u201cABOUT\u201d as an indicator\r\n \/\/ Create an Intent to launch an Activity for the tab (to be reused)\r\n intent = new Intent(this, AboutActivity.class);\r\n spec.setContent(intent);\r\n tabHost.addTab(spec);\r\n \/\/set tab which one you want to open first time 0 or 1 or 2\r\n tabHost.setCurrentTab(1);\r\n tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {\r\n @Override\r\n public void onTabChanged(String tabId) {\r\n \/\/ display the name of the tab whenever a tab is changed\r\n Toast.makeText(getApplicationContext(), tabId, Toast.LENGTH_SHORT).show();\r\n }\r\n });\r\n\r\n\r\n }\r\n\r\n \r\n}<\/pre>\npackage example.abhiandroid.tabhostexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class HomeActivity extends AppCompatActivity {\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_home);\r\n }\r\n}<\/pre>\npackage example.abhiandroid.tabhostexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class ContactActivity extends AppCompatActivity {\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_contact);\r\n }\r\n}<\/pre>\npackage example.abhiandroid.tabhostexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class AboutActivity extends AppCompatActivity {\r\n\r\n @Override\r\n protected void onCreate(Bundle savedInstanceState) {\r\n super.onCreate(savedInstanceState);\r\n setContentView(R.layout.activity_about);\r\n }\r\n}<\/pre>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\"example.abhiandroid.tabhostexample.HomeActivity\">\r\n\r\n<TextView\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:textSize=\"25sp\"\r\nandroid:textColor=\"#f00\"\r\nandroid:textStyle=\"bold\"\r\nandroid:text=\"Home Activity\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\"example.abhiandroid.tabhostexample.ContactActivity\">\r\n\r\n<TextView\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:text=\"Contact Activity\"\r\nandroid:textColor=\"#00f\"\r\nandroid:textSize=\"25sp\"\r\nandroid:textStyle=\"bold\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\"example.abhiandroid.tabhostexample.AboutActivity\">\r\n\r\n<TextView\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_centerInParent=\"true\"\r\nandroid:textSize=\"25sp\"\r\nandroid:textColor=\"#0f0\"\r\nandroid:textStyle=\"bold\"\r\nandroid:text=\"About Activity\" \/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\npackage=\"example.abhiandroid.tabhostexample\">\r\n\r\n<application\r\nandroid:allowBackup=\"true\"\r\nandroid:icon=\"@mipmap\/ic_launcher\"\r\nandroid:label=\"@string\/app_name\"\r\nandroid:theme=\"@style\/AppTheme\">\r\n<activity\r\nandroid:name=\".MainActivity\"\r\nandroid:label=\"@string\/app_name\">\r\n<intent-filter>\r\n<action android:name=\"android.intent.action.MAIN\" \/>\r\n\r\n<category android:name=\"android.intent.category.LAUNCHER\" \/>\r\n<\/intent-filter>\r\n<\/activity>\r\n<activity\r\nandroid:name=\".HomeActivity\"\r\nandroid:label=\"@string\/title_activity_my\"><\/activity>\r\n<activity\r\nandroid:name=\".AboutActivity\"\r\nandroid:label=\"@string\/title_activity_about\"><\/activity>\r\n<activity\r\nandroid:name=\".ContactActivity\"\r\nandroid:label=\"@string\/title_activity_contact\"><\/activity>\r\n<\/application>\r\n\r\n<\/manifest>\r\n<\/pre>\n
<resources>\r\n <string name=\"app_name\">TabHostExample<\/string>\r\n <string name=\"hello_world\">Hello world!<\/string>\r\n <string name=\"action_settings\">Settings<\/string>\r\n <string name=\"title_activity_my\">MyActivity<\/string>\r\n <string name=\"title_activity_about\">AboutActivity<\/string>\r\n <string name=\"title_activity_contact\">ContactActivity<\/string>\r\n<\/resources><\/pre>\n