Android Tab Host and Tab Widget

Tabs make users easy to switch between different views or functional aspects of an application. In this example, I will show how to add simple android tabs to your app using XML tabhost and tabwidget. In this example, I will place three tabs and different content and color in tabs. 

Create a new Android Project

Application Name: TabHost Example
Company Domain: viralandroid.com
Package Name: com.viralandroid.tabhostexample
Minimum SDK: Android 2.2 (API 8 Froyo)

Add TabHost in XML Activity Layout

At first, you have to add TabHost, TabWidget, FrameLayout to your XML activity layout. Aftrer adding TabHost, TabWidget and FrameLayout, your XML file looks like this.

res/layout/activity_main.xml

	<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"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<TabWidget
	android:id="@android:id/tabs"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"></TabWidget>
	<FrameLayout
	android:id="@android:id/tabcontent"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<LinearLayout
	android:id="@+id/tab1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#ffc916"
	android:orientation="vertical">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="This is tab 1" />
	</LinearLayout>
	<LinearLayout
	android:id="@+id/tab2"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#da8200"
	android:orientation="vertical">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="This is tab 2" />
	</LinearLayout>
	<LinearLayout
	android:id="@+id/tab3"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#5b89ff"
	android:orientation="vertical">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="This is tab 3" />
	</LinearLayout>
	</FrameLayout>
	</LinearLayout>
	</TabHost>
	</LinearLayout>

view raw

Modify your Java Activity

To make working perfectly, you have to add little bit code to your java file and final modified code of java activity file looks like this.

src/MainActivity.java

	//Simple Android TabHost and TabWidget Example
	package com.viralandroid.tabhostexample;
	import android.os.Bundle;
	import android.support.v7.app.AppCompatActivity;
	import android.view.Menu;
	import android.view.MenuItem;
	import android.widget.TabHost;
	public class MainActivity extends AppCompatActivity {
	TabHost tabHost;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	TabHost host = (TabHost)findViewById(R.id.tabHost);
	host.setup();
	//Tab 1
	TabHost.TabSpec spec = host.newTabSpec("Tab One");
	spec.setContent(R.id.tab1);
	spec.setIndicator("Tab One");
	host.addTab(spec);
	//Tab 2
	spec = host.newTabSpec("Tab Two");
	spec.setContent(R.id.tab2);
	spec.setIndicator("Tab Two");
	host.addTab(spec);
	//Tab 3
	spec = host.newTabSpec("Tab Three");
	spec.setContent(R.id.tab3);
	spec.setIndicator("Tab Three");
	host.addTab(spec);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	// Inflate the menu; this adds items to the action bar if it is present.
	getMenuInflater().inflate(R.menu.menu_main, menu);
	return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	// Handle action bar item clicks here. The action bar will
	// automatically handle clicks on the Home/Up button, so long
	// as you specify a parent activity in AndroidManifest.xml.
	int id = item.getItemId();
	//noinspection SimplifiableIfStatement
	if (id == R.id.action_settings) {
	return true;
	}
	return super.onOptionsItemSelected(item);
	}
	}