TabWidget in Android UI Control

TabWidget is an Android Control which represents each page in the parents tab collection.

the container object for this widget is tab host, When the user selects a tab, this object sent a message to the parent container(tab host), to tell is to switch the displayed page. The container tab host is used to add labels, add call back handlers, and manage call backs.

Android tab host provides a nice way to present multiple things on a single screen, in order to use tabs we have to set two things to the tab:

1) Tab Indicator : text to show on tab, done by “setIndicator(“Tab Name”);”

2) Tab Content : This is used to set the activity that will be opened when the user selects/clicks a particular tab.

this is set by “setContent(“activity object”);”

TabWidget

Activity_Main.xml :

<?xml version=”1.0″ encoding=”utf-8″?>

<TabHost xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@android:id/tabhost”>

<LinearLayout android:id=”@+id/LinearLayout01″
android:orientation=”vertical”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<TabWidget android:id=”@android:id/tabs”
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”>
</TabWidget>

<FrameLayout android:id=”@android:id/tabcontent”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>
</FrameLayout>

</LinearLayout>

</TabHost>

Screen1.xml :

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout01″
android:background=”#FFFF0000″
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen1″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”First Screen” />

</RelativeLayout>

Screen2.xml :

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FF00FF00″
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen2″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”Second Screen” />

</RelativeLayout>

Screen3.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FF0000FF”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen3″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”Third Screen” />

</RelativeLayout>

Screen4.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FFbbbbbb”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen4″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”fourth Screen” />

</RelativeLayout>

Main_Actvity.java :


package com.example.tabwidget;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends TabActivity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

// create the TabHost that will contain the Tabs
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

TabSpec tab1 = tabHost.newTabSpec(“First Tab”);
TabSpec tab2 = tabHost.newTabSpec(“Second Tab”);
TabSpec tab3 = tabHost.newTabSpec(“Third tab”);
TabSpec tab4 = tabHost.newTabSpec(“Fourth tab”);

// Set the Tab name and Activity
// that will be opened when particular Tab will be selected

tab1.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab1.setContent(new Intent(this,Tab1Activity.class));

tab2.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab2.setContent(new Intent(this,Tab2Activity.class));

tab3.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab3.setContent(new Intent(this,Tab3Activity.class));

tab4.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab4.setContent(new Intent(this,Tab4Activity.class));

/** Add the tabs to the TabHost to display. */
tabHost.addTab(tab1);
tabHost.addTab(tab2);
tabHost.addTab(tab3);
tabHost.addTab(tab4);

}
}

 

Tab1_Activity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;

public class Tab1Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.screen1);
}
}

 

Tab2_Actvity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;

public class Tab2Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen2);
}
}

 

Tab3Activity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;
public class Tab3Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen3);
}
}

 

Tab4Actvity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;
public class Tab4Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen4);
}
}

Skip to toolbar