TabHost in Android with Example
TabHost is a container that holds a set of tabs. Each tab consists of either the activity or the fragments. TabHost consists of two children of which one is FrameLayout (which is used to show the contents of the activity) and another one is TabWidget.(It is used to choose the tab which the user wants to open). Mostly Tabhost is used in the project with the help of the LinearLayout.
Important Methods of TabHost
addTab(TabSpec tabSpec): This method is used to add the new tab onto a tab widget. Whenever a new tab is being specified using TabSpec class, one needs to add that tab in our TabHost.
// initiate TabHost TabHost tabhost = findViewById(R.id.tabhost); // setting up the tabhost tabhost.setup(); // setting the name of the new tab TabHost.TabSpec spec = tabhost.newTabSpec("Tab One"); spec.setContent(R.id.tab1); spec.setIndicator("Tab One"); // adding the tab to tabhost tabhost.addTab(spec);
clearAllTabs(): This method is used to clear all tabs within the tab host. After adding the tab as shown above, if some want to clear the tab from TabHost, then write the below code.
tabHost.clearAllTabs(); // this method is used to clear all the tabs from tabhost
setOnTabChangedListener(OnTabChangeListener): This method is used to register a callback that needs to be invoked when the selected state of any of the items in this list changes. This method is used when one needs to invoke the callback and register it when the state changes of any selected items in the list.
setCurrentTab(int index): By default, tab hosts set the first tab position as the default position which will appear when the app is being launched, but we can explicitly change the default position of the tab using these methods. (Position starts from 0)
tabHost.setCurrentTab(1); // it will set second tab as default selected tab
Example
Let’s try to understand TabHost in detail by making a small project. A sample GIF is given below to get an idea about what we are going to do in this project. We are going to implement this project using both Java and Kotlin Programming languages for Android.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--Linear layout as the root layout--> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > < TabHost android:id = "@+id/tabhost" android:layout_width = "match_parent" android:layout_height = "match_parent" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > <!-- Tab widget to select the tab --> < TabWidget android:id = "@android:id/tabs" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> <!-- FrameLayout which contains the data of the activity --> < FrameLayout android:id = "@android:id/tabcontent" android:layout_width = "match_parent" android:layout_height = "match_parent" > <!-- for tab 1 --> < LinearLayout android:id = "@+id/tab1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "#FFC0CB" android:orientation = "vertical" > <!-- Text View for applying the text to the tab --> < TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center" android:layout_marginTop = "270dp" android:text = "This is Tab 1" android:textColor = "#000" android:textSize = "32sp" /> </ LinearLayout > <!-- for tab 2 --> < LinearLayout android:id = "@+id/tab2" android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "#90ee90" android:orientation = "vertical" > <!-- Text View for applying the text to the tab --> < TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center" android:layout_marginTop = "270dp" android:text = "This is Tab 2" android:textColor = "#000" android:textSize = "32sp" /> </ LinearLayout > <!-- for tab 3 --> < LinearLayout android:id = "@+id/tab3" android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "#add8e6" android:orientation = "vertical" > <!-- Text View for applying the text to the tab --> < TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center" android:layout_marginTop = "270dp" android:text = "This is Tab 3" android:textColor = "#000" android:textSize = "32sp" /> </ LinearLayout > </ FrameLayout > </ LinearLayout > </ TabHost > </ LinearLayout > |
Step 3: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle; import android.widget.TabHost; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initiating the tabhost TabHost tabhost = findViewById(R.id.tabhost); // setting up the tab host tabhost.setup(); // Code for adding Tab 1 to the tabhost TabHost.TabSpec spec = tabhost.newTabSpec( "Tab One" ); spec.setContent(R.id.tab1); // setting the name of the tab 1 as "Tab One" spec.setIndicator( "Tab One" ); // adding the tab to tabhost tabhost.addTab(spec); // Code for adding Tab 2 to the tabhost spec = tabhost.newTabSpec( "Tab Two" ); spec.setContent(R.id.tab2); // setting the name of the tab 1 as "Tab Two" spec.setIndicator( "Tab Two" ); tabhost.addTab(spec); // Code for adding Tab 3 to the tabhost spec = tabhost.newTabSpec( "Tab Three" ); spec.setContent(R.id.tab3); spec.setIndicator( "Tab Three" ); tabhost.addTab(spec); } } |
Kotlin
import android.os.Bundle import android.widget.TabHost import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // initiating the tabhost val tabhost = findViewById<TabHost>(R.id.tabhost) // setting up the tab host tabhost.setup() // Code for adding Tab 1 to the tabhost var spec = tabhost.newTabSpec( "Tab One" ) spec.setContent(R.id.tab1) // setting the name of the tab 1 as "Tab One" spec.setIndicator( "Tab One" ) // adding the tab to tabhost tabhost.addTab(spec) // Code for adding Tab 2 to the tabhost spec = tabhost.newTabSpec( "Tab Two" ) spec.setContent(R.id.tab2) // setting the name of the tab 1 as "Tab Two" spec.setIndicator( "Tab Two" ) tabhost.addTab(spec) // Code for adding Tab 3 to the tabhost spec = tabhost.newTabSpec( "Tab Three" ) spec.setContent(R.id.tab3) spec.setIndicator( "Tab Three" ) tabhost.addTab(spec) } } |
Contact Us