GreenMan: TabWidget in Android

Saturday, November 26, 2011

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!

Tuesday, November 22, 2011

TabWidget in Android (Basic)

Today we will try Tab-Widget in Android , using we can develop Tab Bar apps.

Displays a list of tab labels representing each page in the parent's tab collection. The container object for this widget is TabHost .

We will create very simple app to do this work..

-------------------------------------------
App Name: TabWidgetBasic
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.os.Bundle;
import android.widget.TabHost;

public class ActivityTabWidget extends TabActivity {

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

  mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1")
    .setContent(R.id.textview1));
  mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2")
    .setContent(R.id.textview2));
  mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3")
    .setContent(R.id.textview3));

  mTabHost.setCurrentTab(0);
  }
}

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"
  android:gravity="bottom">
  <TabWidget
   android:id="@android:id/tabs"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"></TabWidget>
  <FrameLayout
   android:id="@android:id/tabcontent"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <TextView
    android:id="@+id/textview1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is a tab"></TextView>
   <TextView
    android:id="@+id/textview2"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is another tab"></TextView>
   <TextView
    android:id="@+id/textview3"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is a third tab"></TextView>
  </FrameLayout>
 </LinearLayout>
</TabHost>

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>

 </application>
</manifest>

The app will start like this..

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

cheers!!

I'd love to hear your thoughts!