Android Tutorial
Software Setup and Configuration
Android Studio
File Structure
Components
Core Topics
Layout
View
Button
Intent and Intent Filters
Toast
RecyclerView
Fragments
Adapters
Other UI Component
Image Loading Libraries
Date and Time
Material Design
Bars
Working with Google Maps
Chart
Animation
Database
Advance Android
Jetpack
Architecture
App Publish
App Monetization
The TabHost is a somewhat older Android UI element used for creating tabbed interfaces. Over time, TabLayout (part of the Android Design Support Library) has become more popular because of its flexibility and better design, integrating seamlessly with the Material Design look. Nonetheless, if you're dealing with legacy code or have a specific need to use TabHost, here's a basic guide.
TabHost Implementation:Create an XML layout with TabHost, TabWidget for the tabs, and a FrameLayout for the content of each tab.
activity_main.xml:
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Content for First Tab -->
<TextView
android:id="@+id/tab1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="This is Tab1" />
<!-- Content for Second Tab -->
<TextView
android:id="@+id/tab2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="This is Tab2" />
</FrameLayout>
</LinearLayout>
</TabHost>
Now, set up the TabHost in your Activity.
MainActivity.kt:
import android.app.Activity
import android.os.Bundle
import android.widget.TabHost
class MainActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tabHost = findViewById<TabHost>(android.R.id.tabhost)
tabHost.setup()
// First Tab
var spec: TabHost.TabSpec = tabHost.newTabSpec("Tab 1")
spec.setContent(R.id.tab1)
spec.setIndicator("Tab 1")
tabHost.addTab(spec)
// Second Tab
spec = tabHost.newTabSpec("Tab 2")
spec.setContent(R.id.tab2)
spec.setIndicator("Tab 2")
tabHost.addTab(spec)
}
}
This sets up a basic TabHost with two tabs.
However, as mentioned earlier, consider using TabLayout with a ViewPager or ViewPager2 for more modern tabbed UI designs. They offer better user experiences, are more flexible, and align well with Material Design guidelines.
Implementing TabHost in Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setup();
// Create tabs
TabHost.TabSpec spec1 = tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");
TabHost.TabSpec spec2 = tabHost.newTabSpec("Tab 2");
spec2.setContent(R.id.tab2);
spec2.setIndicator("Tab 2");
// Add tabs to TabHost
tabHost.addTab(spec1);
tabHost.addTab(spec2);
Customizing TabHost appearance in Android:
TabHost tabHost = findViewById(R.id.tabHost); tabHost.setBackgroundColor(Color.BLUE); tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.RED);
Adding tabs to TabHost dynamically in Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setup();
for (int i = 1; i <= 3; i++) {
TabHost.TabSpec spec = tabHost.newTabSpec("Tab " + i);
spec.setContent(R.id.tab1); // Set the content for each tab
spec.setIndicator("Tab " + i); // Set the tab indicator
tabHost.addTab(spec);
}
TabHost with Fragments in Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setup();
TabHost.TabSpec spec1 = tabHost.newTabSpec("Tab 1");
spec1.setContent(new TabHost.TabContentFactory() {
@Override
public View createTabContent(String tag) {
return new Fragment1();
}
});
spec1.setIndicator("Tab 1");
// Repeat for other tabs...
tabHost.addTab(spec1);
Handling tab selection events in TabHost Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
// Handle tab selection change
}
});
TabHost with ViewPager in Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setup();
ViewPager viewPager = findViewById(R.id.viewPager);
TabLayout tabLayout = findViewById(R.id.tabLayout);
TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
// Connect TabHost with ViewPager
new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1))).attach();
TabHost and TabWidget in Android XML layout:
<TabHost
android:id="@+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Tab content goes here -->
</FrameLayout>
</TabHost>
TabHost with icons and text in Android:
TabHost tabHost = findViewById(R.id.tabHost);
tabHost.setup();
TabHost.TabSpec spec1 = tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1", getResources().getDrawable(R.drawable.ic_tab1));
// Repeat for other tabs...
tabHost.addTab(spec1);
Nested TabHost examples in Android:
// Implement nested TabHost instances within Fragments or Activities
TabHost with Kotlin in Android:
val tabHost: TabHost = findViewById(R.id.tabHost)
tabHost.setup()
val spec1: TabHost.TabSpec = tabHost.newTabSpec("Tab 1")
.setContent(R.id.tab1)
.setIndicator("Tab 1")
// Repeat for other tabs...
tabHost.addTab(spec1)
Styling and theming TabHost in Android:
<!-- Apply styles and themes to TabHost and TabWidget -->
Swipeable tabs with TabHost in Android:
// Combine TabHost with ViewPager and enable swiping
TabHost with action bar or toolbar in Android:
// Setup TabHost with the action bar or toolbar