Android – simple Tab bar example
Problem: How to display Tab bar in Android?
Solution:
main.xml
<?xml version="1.0" encoding="utf-8"?> <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:layout_height="match_parent" android:orientation="vertical"> <TabWidget android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"> </TabWidget> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@android:id/tabcontent"> </FrameLayout> </LinearLayout> </TabHost>
TabBarActivity.java
package com.technotalkative.tabbarexample;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
public class TabBarActivityextends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, FirstActivity.class);
spec = tabHost.newTabSpec("First").setIndicator("First")
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, SecondActivity.class);
spec = tabHost.newTabSpec("Second").setIndicator("Second")
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, ThirdActivity.class);
spec = tabHost.newTabSpec("Third").setIndicator("Third")
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, FourthActivity.class);
spec = tabHost.newTabSpec("Fourth").setIndicator("Fourth")
.setContent(intent);
tabHost.addTab(spec);
}
}
tab_test.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/txtDisplayedTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="TextView"
android:gravity="center|center_vertical">
</TextView>
</RelativeLayout>
FirstActivity.java
package com.technotalkative.tabbarexample;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class FirstActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_test);
TextView txtView = (TextView) findViewById(R.id.txtDisplayedTab);
txtView.setText("First Tab is Selected");
}
}
SecondActivity.java
package com.technotalkative.tabbarexample;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class SecondActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_test);
TextView txtView = (TextView) findViewById(R.id.txtDisplayedTab);
txtView.setText("Second Tab is Selected");
}
}
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.technotalkative.tabbarexample"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="8" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".TabBarActivity"
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="FirstActivity">
</activity>
<activity android:name="SecondActivity">
</activity>
<activity android:name="ThirdActivity">
</activity>
<activity android:name="FourthActivity">
</activity>
</application>
</manifest>
