6.TAB LAYOUT

To create a tabbed UI, you need to use a TabHost and a TabWidget. The TabHost must be the root node for the layout, which contains both the TabWidget for displaying the tabs and a FrameLayout for displaying the tab content. While doing your application you need to extend TabActivity in your activity.

TabHost is container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

TabWidget helps displays a list of tab labels representing each page in the parent's tab collection. The container object for this widget is TabHost. When the user selects a tab, this object sends a message to the parent container, TabHost, to tell it to switch the displayed page. You typically won't use many methods directly on this object. The container TabHost is used to add labels, add the callback handler, and manage callbacks. You might call this object to iterate the list of tabs, or to tweak the layout of the tab list, but most methods should be called on the containing TabHost object.

An example of tab is given below

First activity

package a.b.c;

import android.app.Activity;

import android.app.TabActivity;

import android.content.Intent;

import android.content.res.Resources;

import android.os.Bundle;

import android.widget.TabHost;

import android.widget.TabHost.OnTabChangeListener;

import android.widget.TabHost.TabSpec;

import android.widget.Toast;

public class TablayoutActivity extends TabActivity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Resources resource = getResources();

TabHost tabhost = getTabHost();

TabHost.TabSpec spec;

Intent intent;

intent = new Intent().setClass(TablayoutActivity.this, tab1.class);

spec = tabhost.newTabSpec("one").setIndicator("Call",resource.getDrawable(R.drawable.ic_launcher)).setContent(intent);

tabhost.addTab(spec);

intent = new Intent().setClass(TablayoutActivity.this, tab2.class);

spec = tabhost.newTabSpec("two").setIndicator("Sms",resource.getDrawable(R.drawable.ic_launcher)).setContent(intent);

tabhost.addTab(spec);

intent = new Intent().setClass(TablayoutActivity.this, tab3.class);

spec = tabhost.newTabSpec("three").setIndicator("Call Logo",resource.getDrawable(R.drawable.ic_launcher)).setContent(intent);

tabhost.addTab(spec);

tabhost.setOnTabChangedListener(new OnTabChangeListener() {

@Override

public void onTabChanged(String arg0) {

// TODO Auto-generated method stub

Toast.makeText(getApplicationContext(), "Moving to next tab", Toast.LENGTH_LONG).show();

}

});

tabhost.setCurrentTab(0);

}

For each tab, a TabHost.TabSpec is created to define the tab propertiesThe newTabSpec(String) method creates a new TabHost.TabSpec identified by the given string tag. For each TabHost.TabSpec, setIndicator(CharSequence, Drawable) is called to set the text and icon for the tab, and setContent(Intent) is called to specify the Intent to open the appropriate Activity. Each TabHost.TabSpec is then added to the TabHost by calling addTab(TabHost.TabSpec).

At the very end, setCurrentTab(int) opens the tab to be displayed by default, specified by the index position of the tab.

Notice that not once was the TabWidget object referenced. This is because a TabWidget must always be a child of a TabHost, which is what you use for almost all interaction with the tabs. So when a tab is added to the TabHost, it's automatically added to the child TabWidget.

First xml page

<?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:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="5dp">

<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"

android:padding="5dp" />

</LinearLayout>

</TabHost>

Second activity

package a.b.c;

import android.app.Activity;

import android.os.Bundle;

public class tab1 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main1);

}

Main1.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@android:id/tabhost" >

<Button

android:text="One"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

Third activity

package a.b.c;

import android.app.Activity;

import android.os.Bundle;

public class tab1 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main2);

}

Main2.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@android:id/tabhost" >

<Button

android:text="Two"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

Fourth activity

package a.b.c;

import android.app.Activity;

import android.os.Bundle;

public class tab1 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main3);

}

Main3.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@android:id/tabhost" >

<Button

android:text="One"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

Manifest file

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="a.b.c"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk android:minSdkVersion="10" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:label="@string/app_name"

android:name=".TablayoutActivity" >

<intent-filter >

</intent-filter>

</activity>

</application>

</manifest>

Android

Monday, May 21, 2012

TAB LAYOUT in android

6.TAB LAYOUT

No comments:

Post a Comment