Android Simple TabHost TabWidget example tutorial

Creating android app with tabs structure to open individual layout files, Activity on tab menu button press.

android-project-download-code-button

Tab layout is gives us the ability to insert multiple android activities including layout files on a single activity to share your app content online. Tabhost hold all the created activities into a single frame layout and developer can add multiple tab menu on application and each tab holds an activity screen to show their own content. This tab is mostly used where android application developer wants to show simple tab structure on their android app. So here is the complete step by step tutorial for Android Simple TabHost TabWidget example tutorial.

tabwidget working structure

Android Simple TabHost TabWidget example tutorial.

1. Star new project in Eclipse or Android studio.

2. Add 3 activities on your existing create android project. For directly add method( Easiest method to add activities ) Eclipse Users Click Here, Android studio User click Here. Set activity names as TabActivity_1, TabActivity_2, TabActivity_3 .

Code for MainActivity.java file.

package com.android_examples.com.tabhost;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

 TabHost TabHostWindow;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 //Assign id to Tabhost.
 TabHostWindow = (TabHost)findViewById(android.R.id.tabhost);
 
 //Creating tab menu.
 TabSpec TabMenu1 = TabHostWindow.newTabSpec("First tab");
 TabSpec TabMenu2 = TabHostWindow.newTabSpec("Second Tab");
 TabSpec TabMenu3 = TabHostWindow.newTabSpec("Third Tab");
 
 //Setting up tab 1 name.
 TabMenu1.setIndicator("Tab1");
 //Set tab 1 activity to tab 1 menu.
 TabMenu1.setContent(new Intent(this,TabActivity_1.class));
 
 //Setting up tab 2 name.
 TabMenu2.setIndicator("Tab2");
 //Set tab 3 activity to tab 1 menu.
 TabMenu2.setContent(new Intent(this,TabActivity_2.class));
 
 //Setting up tab 2 name.
 TabMenu3.setIndicator("Tab3");
 //Set tab 3 activity to tab 3 menu.
 TabMenu3.setContent(new Intent(this,TabActivity_3.class));
 
 //Adding tab1, tab2, tab3 to tabhost view.
 
 TabHostWindow.addTab(TabMenu1);
 TabHostWindow.addTab(TabMenu2);
 TabHostWindow.addTab(TabMenu3);
 
 }
}

Code for activity_main.xml layout file.

 <RelativeLayout 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="com.android_examples.com.tabhost.MainActivity" >

 <TabHost
 android:id="@android:id/tabhost"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignParentLeft="true"
 android:layout_alignParentTop="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" >

 </FrameLayout>
 </LinearLayout>
 </TabHost>

</RelativeLayout>

 

Code for TabActivity_1.java file.

package com.android_examples.com.tabhost;
import android.app.Activity;
import android.os.Bundle;

public class TabActivity_1 extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_tab_activity_1);
 }
}

Code for activity_tab_activity_1.xml layout file.

 <RelativeLayout 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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.tabhost.TabActivity_1" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="THIS IS TAB 1 SCREEN"
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Code for TabActivity_2.java file.

package com.android_examples.com.tabhost;
import android.app.Activity;
import android.os.Bundle;

public class TabActivity_2 extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_tab_activity_2);
 }
}

Code for activity_tab_activity_2.xml layout file.

 <RelativeLayout 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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.tabhost.TabActivity_2" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="THIS IS TAB 2 SCREEN"
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Code for TabActivity_3.java file.

package com.android_examples.com.tabhost;
import android.app.Activity;
import android.os.Bundle;

public class TabActivity_3 extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_tab_activity_3);
 }
}

Code for activity_tab_activity_3.xml layout file.

 <RelativeLayout 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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.android_examples.com.tabhost.TabActivity_3" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="THIS IS TAB 3 SCREEN "
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Screenshots:

Android Simple TabHost TabWidget example tutorial tab2

tab3

Click Here To Download Android Simple TabHost TabWidget example tutorial project.

Leave a Reply

Your email address will not be published. Required fields are marked *