HOW TO BUILD A TAB LAYOUT IN ANDROID

HOW TO BUILD A TAB LAYOUT IN ANDROID
Lecturer: George Nguyen
Author: Nhan Bui Trong s3275049
Son Pham Dinh s3260624
Thanh Hoang Ngoc s3275145
This tutorial is going to demonstrate step by step how to create a simple tab activity in Android 4.0.3.
I.> Create a new project
Create a new project with whatever name you like.
II.> Create 3 XML file for storing images
Create 3 XML file to tell which image to use in each tab and place them in the same “res/drawable” folder.
icon_android_config.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;
<item android:drawable=”@drawable/android_black”/>
</selector>

icon_apple_config.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;
<item android:drawable=”@drawable/apple_black”/>
</selector>

icon_windows_config.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;
<item android:drawable=”@drawable/windows_black”/>
</selector>
III.> Create 4 Activities
Create 4 activitiy classes
MainActivity.java

package com.example.android;

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.TabSpec;

public class MainActivity extends TabActivity {

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Resources ressources = getResources();
TabHost tabHost = getTabHost();

// Android tab
Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
TabSpec tabSpecAndroid = tabHost
.newTabSpec(“Android”)
//the id of the xml file that contain the image displayed in that tab
.setIndicator(“”, ressources.getDrawable(R.drawable.icon_android_config))
.setContent(intentAndroid);

// Apple tab
Intent intentApple = new Intent().setClass(this, AppleActivity.class);
TabSpec tabSpecApple = tabHost
.newTabSpec(“Apple”)
//the id of the xml file that contain the image displayed in that tab
.setIndicator(“”, ressources.getDrawable(R.drawable.icon_apple_config))
.setContent(intentApple);

// Windows tab
Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
TabSpec tabSpecWindows = tabHost
//title of the tab
.newTabSpec(“Windows”)
//the id of the xml file that contain the image displayed in that tab
.setIndicator(“”, ressources.getDrawable(R.drawable.icon_windows_config))
.setContent(intentWindows);

// add all tabs
tabHost.addTab(tabSpecAndroid);
tabHost.addTab(tabSpecApple);
tabHost.addTab(tabSpecWindows);

//set Windows tab as default (zero based)
tabHost.setCurrentTab(0);
}

}
}
}
AppleActivity.java
package com.example.android;

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

public class AppleActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“This is Apple tab”);
setContentView(textview);
}
}
AndroidActivity.java
package com.example.android;

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

public class AndroidActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“This is Android tab”);
setContentView(textview);
}
}
WindowsActivity.java
package com.example.android;

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

public class WindowsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“This is Windows mobile tab”);
setContentView(textview);
}
}
IV.> Create Android Layout file
main.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<TabHost xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@android:id/tabhost”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<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>
V.> Android Manifest
Make sure that the AndroidManifest.xml contained 3 tab activities
<activity android:name=”.AndroidActivity” />
<activity android:name=”.WindowsActivity” />
<activity android:name=”.AppleActivity” />
The result should be something similar to this: