TabWidget in Android (Advance)

We already create simple Tab app in android check TabWidget in Android (Basic)
So today we will try to add some advance things.

like how to put Tabs at the Bottom in Android
load different pages on different Tabs.

so let's try this small app..

 -------------------------------------------
App Name: TabWidgetAdvance
Package Name: com.rdc
Android SDK: Android SDK 2.3.3 / API 10
Default TabActivity Name: ActivityTabWidget
-------------------------------------------


ActivityTabWidget.java

package com.rdc;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class ActivityTabWidget extends TabActivity {
 private TabHost mTabHost = null;
 private Intent ihome, imusic, iabout;

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

  //create tab host to add tabs
  mTabHost = getTabHost();

  
  LayoutInflater.from(this).inflate(R.layout.main,
    mTabHost.getTabContentView(), true);

  // create intents to load another page on Tabs
  ihome = new Intent(ActivityTabWidget.this, ActivityHome.class);
  imusic = new Intent(ActivityTabWidget.this, ActivityMusic.class);
  iabout= new Intent(ActivityTabWidget.this,ActivityAboutMe.class);

  // create tabs and add to TabHost

  mTabHost.addTab(mTabHost.newTabSpec("tab1")
    .setIndicator(" Home ")
    .setContent(ihome));

  mTabHost.addTab(mTabHost.newTabSpec("tab3")
    .setIndicator(" Music ")
    .setContent(imusic));

  mTabHost.addTab(mTabHost.newTabSpec("tab3")
    .setIndicator(" About Me ")
    .setContent(iabout));

  // set default selected tab
  mTabHost.setCurrentTab(0);

 }
}

now create three Activities Pages for Three different Tabs
ActivityHome.java

package com.rdc;

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

public class ActivityHome extends Activity {

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

ActivityMusic.java

package com.rdc;

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

public class ActivityMusic extends Activity {

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

ActivityAboutMe.java

package com.rdc;

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

public class ActivityAboutMe extends Activity {

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

}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost
 xmlns:android="http://schemas.android.com/apk/res/android"
 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">

  <FrameLayout
   android:id="@android:id/tabcontent"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="1">
   <TextView
    android:id="@+id/textview1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
   <TextView
    android:id="@+id/textview2"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
   <TextView
    android:id="@+id/textview3"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
  </FrameLayout>
  <TabWidget
   android:id="@android:id/tabs"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="0"
   android:layout_marginBottom="-4dp">
  </TabWidget>
 </LinearLayout>
</TabHost>

now create three XML Pages for Three different Tabs
home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="Home"
  android:gravity="center_horizontal"
  android:textColor="#000000"></TextView>

</LinearLayout>

music.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:gravity="center_horizontal"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="Music"
  android:textColor="#000000"></TextView>
</LinearLayout>

aboutme.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:gravity="center_horizontal"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="About Me"
  android:textColor="#000000"></TextView>
</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
 xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.rdc"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="10" />

 <application
  android:icon="@drawable/icon"
  android:label="@string/app_name">
  <activity
   android:name=".ActivityTabWidget"
   android:label="@string/app_name">
   <intent-filter>
   <action android:name="android.intent.action.MAIN" />
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityHome"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityMusic"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityAboutMe"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

 </application>
</manifest>

The app will start like this..

You can download the complete source code zip file here : TabWidgetAdvance

cheers!!

I'd love to hear your thoughts!